jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

jquery.tablesorter.jsで順序カラムをソートしない

2017年4月5日

tableタグで表示された表をソートするjQueryプラグインtablesorterはとても便利です。

jquery.tablesorter.js : http://tablesorter.com/docs/

WEBシステムを制作していると、こういった表を扱い機会が多く、また、顧客よりソートの要望が必ず出てきます。表データは大方がデータベース等から取り出すと思いますので、単純に考えるとORDER BYすれば良いのですが、余計なページ読込が発生します。

jquery.tablesorter.jsはページを再読込するのではなく、HTML上で完結するのでサーバーにもユーザーにも優しいですね。

基本的なサンプル

サンプル

#myTableをテーブルに設定します。

なお、クリックした項目タイトルの背景色を変更するCSSは以下のような感じです。

 

ここまでではあちこちで紹介されていますが、今回お客様からご相談があったのは、表の左端に連番を表示し、かつ、どの項目でソートしても連番はソートしたくないというものでした。

表の連番はソートせず、常に連番として表示させる

サンプル

公式サイトを読んでもそういった機能は無さそう(或いは英文なので読み切れてない)なので、思案した結果、ソートの度にNo.を連番で書き換えるという事にしました。ただ、THをクリックした際にon clickイベントが発火してくれないようなので、jquery.tablesorter.jsに書き加える事にしました。

jquery.tablesorter.js (715行目付近)

連番のカラムを以下にようにします。

$headers.clickがtablesorterのイベント発生箇所なので、そこでth_numberを書き換える処理を加えました。また、イベント発生と同時だと連番付けが発火出来ない、或いは打ち消される?ようなので、setTimeoutで0.1秒遅らせています。

こういった要望は少ないかもしれませんが、参考程度に。

 

  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP