0

私は ajax を使用してテーブル行を動的にロードしています。ユーザーが [さらに読み込む] ボタンをクリックすると、[さらに読み込む] というボタンが表示され、tbody に 15 個のトランザクションが追加されます。テーブルの並べ替えは最初の読み込みで正常に機能しますが、[さらに読み込む] ボタンをクリックすると、tbody に 30 のトランザクションがあり、テーブルの並べ替えは降順でのみ機能します。しかし、私はそれを昇順と降順の両方でソートしたいと思っています。しかし、再びloadmoreボタンを2回クリックすると、すべてが正常に機能します。私のコードのどこが間違っているのか、誰かが私に提案できますか? 事前に感謝します。

<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>
4

1 に答える 1

0

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)
于 2013-02-21T15:18:01.003 に答える