jQuery テーブルソートコンポーネント - tablesorter の使用例 example_jquery

1. ファイルをインポートします

コードをコピーします コードは次のとおりです:

効果は図に示すとおりです。

2標準の HTML テーブルには、thead タグと tbody タグが含まれている必要があります

コードをコピー コードは次のとおりです。

名前
性別
/th>

;/td>
男の子

女の子;
/td>

;




3. テーブルをソート可能に設定します




コードをコピーします> コードは次のとおりです:


$(document).ready(function(){ //最初の列はソートされていません (インデックスは 0 から始まります)

$.tablesorter .defaults.headers = {0: {sorter: false}}
$(".tablesorter").tablesorter()

公式ドキュメント: http://tablesorter.com/docs/ 追加説明:

使用中に発生した問題。ajax を使用してテーブル データを取得し、ホームページ上で処理します。ソート時は問題ありません

次のページをソートすると、前のページのデータが再表示されてしまいます。この問題を解決するには、データを取得した後に

をトリガーしてください。 ajax を使用した「イベント、コードは次のとおりです:

コードをコピー

コードは次のとおりです:


$ (".tablesorter").trigger ("update");



私は公式 Web サイトの Pager プラグインを使い始めたばかりで、長い間本当に悩まされていました。これは適切ではないことがわかりました。

オンラインで情報を確認し、次のコードをコンパイルしました:

コードをコピーします

コードは次のとおりです:

$ (".tablesorter tbody tr").addClass("delete");

$(".tablesorter tbody tr.delete").remove(); ").append(html) ;
$(".tablesorter").trigger("appendCache");
$(".tablesorter").trigger("update");
$(" .tablesorter").trigger( "sorton",[[[2,1],[0,0]]]);

ということで、すべて使用しました。長いテストの後、 $(".tablesorter" ).trigger("update"); この文だけで問題が解決できることがわかりました他の内容はわかりません。

必要なファイルのダウンロード アドレス:

http://xiazai.jb51.net/201405/yuanma/jquery.tablesorter.zip


style.css と、テーマブルーの画像パス。