Question

我正在使用ajax动态加载表行，并且当用户点击加载更多按钮时，我有一个名为load more的按钮。在tbody中添加了更多的事务。表排序在第一次加载时工作正常但是点击加载更多按钮现在我在tbody中有30个事务，我的表排序仅用于降序。但我希望它按升序和降序排序。但再次点击loadmore按钮，每件事情都很好。任何人都可以告诉我我的代码有什么问题。任何帮助将提前感谢。

<table class="tablesorter list-table" id='AllPaymentTable'> 

</table> 

<script>
var thead = $("<thead/>").appendTo('#AllPaymentTable');
var PaymentHeader= responseData.data.payment_header_object;
$("<tr/>")
  .append("<th class='name'>" +PaymentHeader[i] + "</th>" )
  .appendTo(thead);

var tbody = $("<tbody/>").appendTo('#AllPaymentTable');

var payActivitydetails = responseData.data.payment_data_object;

for (var i = 0; i < payActivitydetails.length; i++) {
  var payDetails = payActivitydetails[i];
  $("<tr class='recentPaymentrow'  id="+payDetails.payment_id +"/>")
  .append("<td class='name'>" + payDetails.customer_name  + "</td>")
  .appendTo(tbody);
  $(".tablesorter").tablesorter();
}

$('#loadmorebtn').bind('click',function(event){
  event.preventDefault();
  event.stopPropagation();
  // ajax call goes here
  //Recents payment populating on screen starts here
  var payActivitydetails = responseData.data.payment_data_object;
  for (var i = 0; i < payActivitydetails.length; i++) {
    var payDetails = payActivitydetails[i];
    $("<tr class='recentPaymentrow'  id="+payDetails.payment_id +"/>")
      .append("<td class='name'>" + payDetails.customer_name  + "</td>")
      .appendTo('tbody')
    $(".tablesorter").tablesorter();
  }
</script>

Answer 1

一旦您初始化了tablesorter，您就不应该再次初始化它。相反，使用update方法让tablesorter识别表中的更改：

$("<tr class='recentPaymentrow'  id="+payDetails.payment_id +"/>")
  .append("<td class='name'>" + payDetails.customer_name  + "</td>")
  .appendTo('tbody')
  .trigger('update'); // update method (bubbles up to table)

在动态加载表的表排序上遇到问题

1 个答案: