jqueryプラグインtablesorterによるhtmlテーブルの実装方法の詳細説明使用例-jsチュートリアル-php.cn

jqueryプラグインtablesorterによるhtmlテーブルの実装方法の詳細説明使用例

伊谢尔伦

リリース： 2017-07-22 09:56:50

オリジナル

2600 人が閲覧しました

tablesort は、非常に便利な jQuery テーブルソートプラグインです。複数のデータ型の並べ替えをサポートし、テーブルの内容のデータ型を自動的に識別するため、非常に使いやすくなっています。

jQuery tablesort を使用して HTML テーブルメソッドを実装します:

1. jQuery および tablesort スクリプトをダウンロードし、HTML でスクリプトファイルを参照します:

<script type="text/javascript" src="../jquery-latest.js"></script>
<script type="text/javascript" src="../jquery.tablesorter.js"></script>

ログイン後にコピー

2. 並べ替える必要がある HTML テーブルをフォーマットします。 :

a. 並べ替える必要があるテーブルの CCS クラスを指定します: class="sort-table"
b. thead タグと tbody タグを使用してテーブルヘッダーとテーブル本体をマークします
c. 、 th タグを使用してテーブルヘッダーを定義する必要があります
フォーマットされた HTML テーブルは次のようになります:

<table border=1 width="800px" class="sort-table">
<thead>
 <tr>
 <th>Date</th>
 <th>Usage</th>
 <th>Cost</th>
 <th>Remain</th>
 </tr>
</thead>
<tbody>
 <tr>
 <td>2008-3-25</td>
 <td>book place @dhgu</td>
 <td>-40</td>
 <td>-40</td>
 </tr>
 <tr>
 <td>2008-4-1</td>
 <td>book place @dhgu</td>
 <td>-40</td>
 <td>-80</td>
 </tr>
</tbody>
</table>

ログイン後にコピー

3. jQuery コードを追加して HTML テーブルの並べ替えを有効にします:
本体内で tablesorter() 関数を呼び出します。 2番目のステップで指定したソートされたテーブルCSSクラスで:

<body>
<script type="text/javascript">
 $(document).ready(function() {
 $(".sort-table").tablesorter(); 
 });
</script>

ログイン後にコピー

上記の3つのステップを通じて、jQuery tablesortはHTMLテーブルをソートできます。

以上がjqueryプラグインtablesorterによるhtmlテーブルの実装方法の詳細説明使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

jqueryプラグインtablesorterによるhtmlテーブルの実装方法の詳細説明 使用例

jqueryプラグインtablesorterによるhtmlテーブルの実装方法の詳細説明使用例