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

シェアする

tablesorter

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

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

そこで使用したのが


拡張性が高くてお勧め。

新刊スケジュールでは、デフォルトの状態では「日付」->「出版社」の順にソートする必要があり、マルチソートできる 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

シェアする

フォローする