開発したアプリなど一覧

jQueryのプラグインを使ってテーブルを並び替える

記事内にアフィリエイトリンクを含む場合があります

tablesorter

ラノオンにある新刊スケジュールを作った際のメモ

まず、ラノオンでは全ページでjQuery1.6.4を読み込んでいます。
なのでテーブルのソートを行うスクリプトもjQueryのプラグインで探しました。

そこで使用したのが

tablesorter


拡張性が高くてお勧め。

新刊スケジュールでは、デフォルトの状態では「日付」->「出版社」の順にソートする必要があり、マルチソートできる tablesorter はうってつけでした。(他にも探せばあると思うけど)

一点、日付の解釈がアメリカ式なのかわからないがうまく日付順にならなかったのでカスタムソートを使用しています。このへんの柔軟性も良いですね!

以下 JavaScript のソース

// 日付のカスタムソート $.tablesorter.addParser({ id: 'sales-date', is: function(s) { return false; }, format: function(s) { return s.toLowerCase().replace(/[^0-9]/g,''); }, type: 'string' });

$(document).ready(function() { // call the tablesorter plugin $("table").tablesorter({ // sort on the first column and third column, order asc sortList: [[0,0],[1,0]] , headers: { 0: { sorter:'sales-date' } } , widgets: ['zebra'] }); });

Sponsored Link

コメント

タイトルとURLをコピーしました