0

ユーザーが連絡先リストを作成して維持できるようにするためのコードを書いています。連絡先はテーブルにリストされており、最初のセルは、この連絡先がすでにこの連絡先リストにある場合にチェックされるチェックボックスです。

私はtablesorterpagerプラグインを使用しているので、ユーザーは連絡先のリストを簡単にページングできます。チェックボックスがオンになっているかどうかで連絡先を並べ替えるチェックボックスフィールド用のカスタムパーサーがあります。

私の問題は、これらの両方を同時に機能させることができないことです。

関連するコードは次のとおりです。

$(function() {
        $('#userTable')
                .tablesorter({
                        headers: {
                                0: {
                                        sorter: 'checkbox'
                                }
                        }
                })
                .tablesorterPager({container: $("#pager")});
});

.tablesorter呼び出しまたは.tablesorterPager呼び出しのいずれかをコメントアウトすると、もう一方は正常に機能します。両方をコメント化しないままにすると、2番目の呼び出しのみが実際に機能します。ページ付けまたはカスタムパーサーのいずれかを使用できるようですが、両方を使用することはできません。2つの呼び出しを入れ替えましたが、一貫して2番目の呼び出しが実行され、最初の呼び出しは消えます。

明らかな何かが欠けていると思いますが、何が見つかりません。どちらの呼び出しも、もう一方がコメントアウトされたときに機能するため、それ自体は明らかに問題ありませんが、一緒には機能しません。

私はtablesorter2.1.19を使用しています（ここから）; およびjquery1.7.1

4

1 に答える 1

7

そのパーサーを使用すると、「updateCell」メソッドを使用してセルの内容を変更しますが、このメソッドはrowIndexとcellIndexを使用してセルの場所を判別するため、ページャーがアクティブな場合は正確な情報を取得できない場合があります。したがって、最も簡単な解決策は、ページャーremoveRowsオプションをに設定することfalseです。

これがデモです

// add parser through the tablesorter addParser method
$.tablesorter.addParser({
  id: 'checkbox',
  is: function(s) {
    return false;
  },
  format: function(s, table, cell, cellIndex) {
    var $c = $(cell);
    // return 1 for true, 2 for false, so true sorts before false
    if (!$c.hasClass('updateCheckbox')) {
      $c.addClass('updateCheckbox').bind('change', function() {
        // resort the table after the checkbox status has changed
        var resort = false;
        $(table).trigger('updateCell', [cell, resort]);
      });
    }
    return ($c.find('input[type=checkbox]')[0].checked) ? 1 : 2;
  },
  type: 'numeric'
});

$(function() {

  $('table')
    .tablesorter({
      widgets: ['zebra'],
      headers: {
        0: { sorter: 'checkbox' }
      }
    })
    .tablesorterPager({
    // target the pager markup - see the HTML block below
    container: $(".pager"),
    // remove rows from the table to speed up the sort of large tables.
    // setting this to false, only hides the non-visible rows; needed
    // if you plan to add/remove rows with the pager enabled.
    removeRows: false
  });

});​
于 2012-04-28T00:30:52.770 に答える