仕事でHTMLタグで組んだテーブルの内容を並び替える必要があったので、tablesorterというjQueryライブラリで対応しました。今回はその備忘録です。
このサイトから、「jquery.tablesorter.zip」ダウンロードし、解凍後任意の場所にフォルダをアップ。
外部読み込みを記述。
<script type="text/javascript" src="../js/tablesorter/jquery-latest.js"></script>
<script type="text/javascript" src="../js/tablesorter/jquery.tablesorter.js"></script>
<script type="text/javascript" src="../js/tablesorter/docs/js/chili/chili-1.8b.js"></script>
<script type="text/javascript" src="../js/tablesorter/docs/js/docs.js"></script>
上の外部リンクの下に続けてソートの設定(1列目と3列目は並び替えさせない設定になっています)
<script type="text/javascript">
$(document).ready(function() {
// call the tablesorter plugin
$("table").tablesorter({
// sort on the first column and third column, order asc
sortList: [[5,0]],headers: {
0: {sorter:false},
2: {sorter:false}
}
});
});
</script>
つづけて外部CSSの設定
<link rel="stylesheet" href="../js/tablesorter/themes/blue/style.css" type="text/css"/>
あとは普通にTableタグでテーブルを作成すると昇順・降順で並び替えができるようになったのですが、機会があればこのブログでも動作するように してみたいと思います。