tablesortarが動かないときの原因と対処法

tablesorterとは

tablesorterは、HTMLで作成したテーブルに、ソート機能（並べ替え機能）を持たせることのできるjQueryです。

jQueryなので、特に難しい知識やJavaScriptが書けなくても、コピペだけでソート機能の追加ができます。

tablesorterはGitHubでもダウンロードできる

GitHubでもtablesorterはダウンロードできます。

https://mottie.github.io/tablesorter/docs/

tablesorterが動かない原因と対処法①　jQueryが読み込まれているか

tablesorterを入れたのに動かないとき、まず初めに確認してほしいことは、head内にjQueryが読み込まれているかどうかです。

tablesorterはjQueryで動きます。jQuery本体が読み込まれていないと（tablesorter単品では）動きません。

必ずjQueryとセットで書きましょう。

<!-- jQuery本体の読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<!-- tablesorterの読み込み -->
<script src="./js/tablesorter.min.js"></script>

jQueryをダウンロードしてサーバ内に置く場合と、tablesorterのパスも正しいかどうか、しっかり確認してください。

jQueryとtablesorterの読み込みで、下準備が整いました。

tablesorterが動かない原因と対処法②　発火命令が書かれているか

次の原因としては、tablesorterの発火が書かれていない場合です。

発火というのは、「tablesorterよ、動け！」という命令です。

jQueryとtablesorterをhead内で読み込むことは、下準備だけです。

jQueryは「動け」と命令しない限りは動かないものが多いので注意してください。

$(function() {
  $("#myTable").tablesorter();
});

ここで#myTableは各自で適宜設定したID名やクラス名に変更してください。

tablesorterが動かない原因と対処法③　theadとtbodyは書かれているか

tablesorterのtableのHTMLの書き方には特徴があります。

theadタグとtbodyタグで、テーブルの見出しエリアと、テーブルの本体エリアに区切る必要があります。

<table id="myTable" class="tablesorter">
  <thead>
    <tr>
      <th>氏名</th>
      <th>住所</th>
      <th>電話番号</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>田中　太郎</td>
      <td>東京都千代田区丸の内1-2-3</td>
      <td>090-1111-2222</td>
    </tr>
    <tr>
      <td>佐藤　花子</td>
      <td>東京都渋谷区道玄坂1-2-3</td>
      <td>090-2222-3333</td>
    </tr>
    <tr>
      <td>斎藤　次郎</td>
      <td>東京都新宿区新宿1-2-3</td>
      <td>090-3333-4444</td>
    </tr>
  </tbody>
</table>

上記2行目のthead、9行目のtbodyのように、見出し部分と本体部分を区切っているか確認しましょう。

tablesorterが動かない原因と対処法④　tablesorter.cssは読み込まれているか

tablesorterのCSSも表示に必要です。

上記①〜③が正しくセットされていればtablesorterは機能しますが、ソートアイコン▼▲が表示されません。

<link rel="stylesheet" href="./css/tablesorter.css" media="all">

CSSもhead内で読み込まれているか、読み込み先のパスは正しいかを再度確認しましょう。