Ajaxを使ってテーブルを書き換えたらtablesorterが効かなくなったときの対処

参考

tablesorter：動的に行追加（先頭）した後でもソートを有効にする方法（及びスクロール位置の記憶）

現象

一覧ページからAjaxを使って絞り込み検索をして一覧テーブルを書き換えたらtablesorterが効かなくなった

tablesorterとは

jQueryのプラグイン。

テーブルのthタグの部分をクリックすると、並び替えてくれる。

↓ここからダウンロードできます
https://mottie.github.io/tablesorter/docs/index.html#Download

↓下の方にZIPでダウンロードするボタンがあります。

解決

$("#テーブルID").trigger("update");

これをAjaxの関数に追加しました。

テーブルの書き出しを行った後に実行します

/* Ajaxの処理 */
$.ajax({
// 略
// 成功時の処理
.done(function(response){
  // テーブルを書き換える関数を呼び出す(自作の関数)
  updateTable(response); 
)};


/* テーブルを書き換える関数 */
function updateTable(response){
  // テーブルのtbodyの中身を空に
  $("テーブルID > tbody").text("");

  // テーブルの書き出し
  $.each( response, function( index, res ){
  // 略(tdなどの書き出し)
  });

  // tablesorterをupdateして有効にする
  $("テーブル名").trigger("update");
}

検索力を上げるための教訓

「ググれば分かる」っていうのはググれるようになってから。

ググるって検索ワードが必要ですね。

参考のページにほぼそのまま答えは書いてあるので、
検索力がある人からしたら、「ググったら出てくるやん」
検索力がない人からしたら、「検索ワードは？」

ちなみに自分は
「ajax tablesorter 効かない」
で調べてなんとか見つけられました。

でもちょっと前の自分なら
「tablesorter 効かない」
で調べていたと思います。

なぜなら、 Ajaxで書き換えたから効かなくなったという仮説を自分でたてられたから、キーワードに入れました

「これが原因かな？」という仮説が、検索力を高める第一歩だと思いました。

用語も覚えていかないといけませんね

参考のページでは「動的に」という言葉を使っています。

「ああ、javascriptとかjQueryでDOM操作をした時ね」っていうのは、その都度用語を調べて、分からなくても調べて少しずつ触れて覚えていかないといけません。

そのために有効なのが仮説を立てるですね。

すぐに思いつくワードで調べるんじゃなくて、原因を自分なりに考えて、それをキーワードに含めるとヒットしやすくなりますし、そのときに用語も「なんかこんな感じの用語があったなぁ」となって記憶にも定着しやすくなります。

jQueryで「動的に」なんかしたあとはイベントが効かなくなったりすることがある

「あれ！？ボタンがきかんやん！！」というのが自分には何回かありました。

基本的にjqueryを使うときには意識することなのでしょうかね。

同じ様な境遇の方がいたら参考にしてみてください＼(^o^)／