【WordPress】テーブルにソート機能を追加するTable Sorterプラグインがめちゃくちゃ便利だった

sponsored link

Table Sorterプラグインは、tableタグで作った表にソート機能を簡単に実装できます。

インストール

プラグインの新規追加から「Table Sorter」を検索し、インストールします。

tableタグの記述

tableタグの記述を間違えると、ソート機能が動きません。

下記のように、thead、tbodyが必要です。
あとはtableタグにtablesorterクラスを付与。

<table class="tablesorter">
  <thead>
    <tr>
      <th class="sortless">名前</th>
      <th>所属</th>
      <th>出欠</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田太郎</td>
      <td>グループA</td>
      <td>出席</td>
    </tr>
    <tr>
      <td>田中花子</td>
      <td>グループB</td>
      <td>出席</td>
    </tr>
    <tr>
      <td>鈴木一郎</td>
      <td>グループA</td>
      <td>欠席</td>
    </tr>
  </tbody>
</table>

ソートさせないth

特定のthにはソート機能を付けないという場合、thタグに「sortless」クラスを付与してください。

sponsored link

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA