1. ファイルをインポートします コードをコピーします コードは次のとおりです: " rel="stylesheet" type="text/css" > <br><br><br></p>効果は図に示すとおりです。 <p><br> <br>2標準の HTML テーブルには、thead タグと tbody タグが含まれている必要があります<img src="http://files.jb51.net/file_images/article/201405/20140526094752.jpeg?201442694826" alt="jQuery テーブルソートコンポーネント - tablesorter の使用例 example_jquery" ><br><br></p> <p class="codetitle">コードをコピー<a style="CURSOR: pointer" class="copybut"><span style="text-decoration:underline;"> コードは次のとおりです。</span></a></p>< table id="myTable" class="tablesorter > <p class="codebody"><thead> <br><tr> <br><th>名前</th> <br><th>性別</th> <br><th>/th> <br></tr> <br><tr> ;/td><br></p> <td>男の子<br><br> </td> <td>女の子; <br><td>/td> <br><tr> <br></tr></tbody> ; <br></table> <br><br><br><br>3. テーブルをソート可能に設定します <br><br><br><br><br> コードをコピーします> コードは次のとおりです: <br><br><br>$(document).ready(function(){ //最初の列はソートされていません (インデックスは 0 から始まります) <p> $.tablesorter .defaults.headers = {0: {sorter: false}} <br>$(".tablesorter").tablesorter() <br></p> <p class="codetitle"><a style="CURSOR: pointer" class="copybut">公式ドキュメント: http://tablesorter.com/docs/ <span style="text-decoration:underline;"></span>追加説明: </a></p>使用中に発生した問題。ajax を使用してテーブル データを取得し、ホームページ上で処理します。ソート時は問題ありません <p class="codebody"><br>次のページをソートすると、前のページのデータが再表示されてしまいます。この問題を解決するには、データを取得した後に <br><br> をトリガーしてください。 ajax を使用した「イベント、コードは次のとおりです: <br><br><br></p> <p>コードをコピー <br><br> コードは次のとおりです: <br><br><br>$ (".tablesorter").trigger ("update"); <br><br><br><br>私は公式 Web サイトの Pager プラグインを使い始めたばかりで、長い間本当に悩まされていました。これは適切ではないことがわかりました。 <br></p>オンラインで情報を確認し、次のコードをコンパイルしました: <p class="codetitle"><a style="CURSOR: pointer" class="copybut"><span style="text-decoration:underline;"></span></a>コードをコピーします</p> <p class="codebody"> コードは次のとおりです:<br> <br></p>$ (".tablesorter tbody tr").addClass("delete"); <p>$(".tablesorter tbody tr.delete").remove(); ").append(html) ; <br>$(".tablesorter").trigger("appendCache"); <br>$(".tablesorter").trigger("update"); <br>$(" .tablesorter").trigger( "sorton",[[[2,1],[0,0]]]); <br></p> <p class="codetitle"><a style="CURSOR: pointer" class="copybut">ということで、すべて使用しました。長いテストの後、 $(".tablesorter" ).trigger("update"); この文だけで問題が解決できることがわかりました<span style="text-decoration:underline;"></span>他の内容はわかりません。 </a></p>必要なファイルのダウンロード アドレス: <p class="codebody">http://xiazai.jb51.net/201405/yuanma/jquery.tablesorter.zip<br> <br><br>style.css と、テーマブルーの画像パス。 <br></p> </td>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
