2012-08-20

jQueryにブン投げ!ページネーションを実装する


 Webサイトの開発をやってるとめんどくさいこととしてページネーションがあります。
 よく「<< < 1 2 3 ・・・ 10 > >>」とか「最初へ 前へ 1 2 3 ・・・ 10 次へ 最後へ」みたいな大量にあるデータを参照するために20件ずつ区切って表示させたりするWebページはよく見ると思います。
 このようないわゆるページ割りの機能を初めて実装することになったときあまりのめんどくささに「おい。。まじかよ。。。」とぽろっとつぶやきました。
 この時は初めて対面したこともあり、プラグインという発想はなく、HTMLのhiddenとphpのPOST、GETを自分なりに駆使して対応しました。今思えばなんと非効率的か!!
 そしてphpに触れる時間が増え、ZendやCakeといったフレームワークに触れていく中でプラグインというものを知り、その中でCakephpのcakephp-search-paginationというプラグインを使って開発するようになり「ページネーションすぐできたwwwすげぇwww」ってなりました。
 今回、その「ページネーション」に関することなのですがphpではなくjQueryのプラグインでかんたんにできたという記事です。




どんな要素にも対応できるページネーションのプラグイン「paginator.js」


 まずはhttp://archive.plugins.jquery.com/node/12295からpaginator.jsをダウンロードします。
 
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="paginator.js"></script>
<script type='text/javascript'>
$(function() {
itemsPerPage = 3; //指定要素内の区切り数
paginatorStyle = 4; ページネーションのスタイル(from1-4)
paginatorPosition = 'bottom'; //ページネーションの配置(bottom,top)
enableGoToPage = true; //指定ページに飛べるようにするか(false)
$("#id名").pagination();
});
</script>

 headタグで上記のように設定したらあとはbodyタグの中で

<div id="id名">
<p>テキスト</p>
<p>テキスト</p>
<!-- 以下要素分 -->
</div>

 と設定するだけです。ちなみに<div id="id名">~</div>で囲めばテーブルとかにも対応してくれます。
 データを全件抽出してタグで囲めばいいだけなんでものすごく楽です♪
 
 
 ただ問題があるとすれば一度内部でデータを抽出してページネーションを行うので抽出するデータの件数が膨大になると処理が遅くなるということ。
 実際にスペックが劣る環境(メモリは4GあるけどシングルコアなCRU)とある程度スペックが確保されている環境(メモリは2GでCOREi3なCPU)で比較すると体感でわかるくらい処理が遅かったです。
 ※ともにOSはwindows7
 
 
 取り扱うデータによって使い分ける必要はありますが、比較的軽いデータやめちゃくちゃハイスペックな環境で開発する場合はjQueryプラグインは楽だなと感じました。

0 件のコメント :

コメントを投稿

LinkWithin

Related Posts Plugin for WordPress, Blogger...