tablesorter()

投稿日:2022-12-30 投稿者:PS カテゴリ:その他 タグ: , ,

テーブルにソート機能を実装する。

<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<!-- 公開サイトのモジュールを使う場合の src
https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js
-->
<table class="sample">
   ::
</table>
$('table.sample')
  .tablesorter({
    sortList: [ [0,1] ],      // 初期で「1列目(0)を、降順(1)」にソートする
    widgets: ['zebra'],       // "zebra": tr の class に odd, even が付加される
    headers: {
      3: { sorter: false}     // 4列目(3)はソート不可にする場合の例
    }
  })

Pager機能の追加

<script type="text/javascript" src="jquery.tablesorter.pager.min.js"></script> <!-- 追加 -->
<div class="pager">
</div>
$('table')
  .tablesorterPager({
    size: 25,                               // 初期表示の明細数
    output: '{page:input} / {totalPages}',  // pagedisplay に出力する内容
    container: $('.pager')                  // pager コンテンツ
  })