WordPress

table並び替え(ソート)などができるようになるjQuery「tablesorter」

投稿日:

jQuery plugin: Tablesorter 2.0

<table>タグで組んだ表組みを綺麗にゼブラ模様にしたりソートしたりする機能をつけることができます。

歴代J1 順位表 で実際に使っていますので見てみて下さい。

ファイルの読み込みは以下の3つ。自分が使いたいcssjquery-latest.jsjquery.tablesorter.jsです。jquery-latest.jsは他でjQueryを読み込んでいたら必要ありません。

WordPressではfunction.phpで読み込ませることになるので、jsの場合はこんな感じ。

cssはこんな感じでしょうか。

でtableを組みます。重要なのはidとclassです。idは任意のものを付けて、classは必ずtablesorterにします。

で、ページ内のどこかにスクリプトを表記します。idを指定することでそのidのtableがソート対応になります。複数のtableでも使えます。

オプションもいろいろとあります。

widgets: ['zebra']は一行づつ色を変えるオプションです。

sortListはデフォルトで表示する昇順降順を指定出来ます。[0,0]の場合は0列目(左から1列目)を0(昇順)で表示するという意味になります。同様に[1,1]は1列目(左から2列目)を1(降順)で表示するという意味になります。

headers: {2: {sorter:false}はソートさせたくない列に対して指定します。この場合2(左から3列目)をソートしないようにします。

他にもいろいろオプションがありますが、よく使うのはこれくらいでしょう。

詳しい説明はjQuery plugin: Tablesorter 2.0で。

フッター広告







フッター広告







-WordPress
-, , ,

Copyright© salmomoのさるもも , 2017 All Rights Reserved.