[jQuery] テーブル 整列(科 ページ 分け) プラグイン tablesorter (and pager) plugin 使って 表示
《jQuery 1.3 – 作故 力強い ジャバスクリプト ライブラリ》には 多様な プラグインが 紹介されて ある. 彼 中に tablesorterを 使うことに した. tableに 正確に 使う 数 あって, そのまま 適用だけ すれば 分かって なること だからだった.
一応 例題 コードを 含んだ 草 パッケージを ダウンロードする 蟹 楽だ. ダウンロード ページ路 行って 必要な のだけ ダウンする 首都 ある. <div>
基本 コードは 下が 全部.
</div>
$('table').tablesorter()
当然 jqueryわ jquery.tablesorter.jsを 入れると する.
そして きれいな スタイルを 食べさせて たければ, /tablesorter/themes/blue/style.css を linkすると して. css街 ある フォルダに 一緒に ある 絵ファイルを 当然 一緒に 置くと する.(こいつは 全体 パッケージの 圧縮を 解けば 出る.)
スタイルが 食べるように するためには 願う tableに tablesorterという クラスを 直接 与えると する.
テーブル 構造は わ 街 必ず あると する. theadを 基準で tbodyを 整理すること だからだ.
</div>
頭痛い 蟹 ある. td 中に plain text万 ある 場合が 多くは ない ことだ. タグが 一緒に 立ち込めて ある ことだ. これ 場合 タグの 単語たちを 基準で 整列を 日 捨てる. 院するの ない 場合, textを 基準で 整列するように 万たち 数 ある.
参考する デモは ‘セル 中の マークアップ 扱うこと‘という 項目だ.
勿論 下の コードを 取る 使っても なる. 下のように 使えば textExtraction オプションに ある 関数で return日 与える 遊ぶことを 持って 比較を するように なる.
$('table.tablesorter')<br />.tablesorter({<br /> textExtraction: function(node){<br /> return $(node).text();<br /> } <br />)<br />## ページ 分け pager plugin
追加で pager pluginこれ 必要だ. どっちみち ような ホームページで 求める 数 ある.
jsを 連結して, ページの 特定 部分に 下の htmlを 入れる. 当然 経路 修正を 日 与えると する. 私は /css/jquery.tablesorter/pager/icons/ フォルダに 入れてくれたと 仮定した. ような フォルダに ある css ファイルも link日 与えると する.
<div id="pager" class="tablesorterPager"> <br /> <form> <br /> <img src="/css/jquery.tablesorter/pager/icons/first.png" class="first"/> <br /> <img src="/css/jquery.tablesorter/pager/icons/prev.png" class="prev"/> <br /> <input type="text" class="pagedisplay"/> <br /> <img src="/css/jquery.tablesorter/pager/icons/next.png" class="next"/> <br /> <img src="/css/jquery.tablesorter/pager/icons/last.png" class="last"/> <br /> <select class="pagesize"> <br /> <option selected="selected" value="10">10</option> <br /> <option value="20">20</option> <br /> <option value="30">30</option> <br /> <option value="40">40</option> <br /> </select> <br /> </form> <br /></div> <br />
そして 上の jquery コードに 一つを 追加する.
下のように 言葉だ.
.tablesorterPager 関数を 使って あり, container オプションが 入って行く. container増えた page 越す アイコン などが 入っている 要素を 意味する. #pagerと なって あるのに, ところで 上に 私が 取る 使いなさいと たいてい htmlを 見れば id街 pagerだ. 上 divに tablesorterPagerを クラスで 付けた 理由も ある. 基本 css街 ここ 買戻誌なの するためには そうに クラスを 与えると する.
$('tablesorter')<br /> .tablesorter()<br /> .tablesorterPager({container: $("#pager")});<br />
そのため, タグ 中の テキストだけ 土台で 整列が 可能に しながら ページも 分けるように するためには 下の コードが なる.
$('table.tablesorter')<br />.tablesorter({<br /> textExtraction: function(node){<br /> return $(node).text();<br /> } <br />).tablesorterPager({<br /> container: $("#pager")<br />});<br />
それでは 凡そ 説明 完了した. コード 掻くこと 易しく した.
- コメント機能はありません。コメントの代わりに[email protected]
にメールを送ってください。