最も簡単なテーブルのページネーション用プラグイン jQuery.TablePagenationを使ってみた

スポンサーリンク

f:id:kojikoji75:20150801210323j:plain

検索画面や一覧画面にはページネーションがあったほうが便利だが、数年前に一度自前でページネーションを実装した際に結構ゴチャゴチャと大変な思いをした記憶があったため、このところはページネーションはつけないことにしていた。

今回どうしてもつける必要性を感じたので、すぐに使えそうなjQueryプラグインを検索したところ、本当にすぐに使えるものを見つけたのでメモ。

(時間的余裕がある場合はjQueryを使用するよりも、自分が使用しているWebアプリケーションフレームワークに付属のページネーション機能を使用したほうが高速と思われる。今回はあくまで「最も簡単に」を優先している)

f:id:kojikoji75:20140211220031j:plain
サマリー

1.TablePagenationのダウンロード
2.TablePagenationの設置方法
3.TablePagenationの使用感

1.TablePagenationのダウンロード

下記からダウンロードする。

http://neoalchemy.org/tablePagination.html

必要なのはjquery.TablePagination.jsのみ。

2.TablePagenationの設置方法

(1)Head内で読み込む

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablepagination.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    var options = {
    currPage : 1, //最初に表示するページ
    optionsForRows : [1,5,10], //表示する行数
    rowsPerPage : 5 //デフォルト表示行数
    }
    $('#pagenationtest').tablePagination(options);
  });
</script>

(2)あとはbody内のtableに上で決めたid名を振るだけ

<table id="pagenationtest">

ページネーションの説明だけだとここまでで終了。
念のためDB読み込みも含めると以下のように書く

<?php
//DBへ接続
try{
$dbh= new PDO('mysql:host=localhost;dbname=test','root','');
}catch(PDOExeption $e){
var_dump($e->getMessage());
exit;
}
?>
<table id="pagenationtest">
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
<th>header5</th>
</tr>
</thead>
<tbody>
<?php
$sql="select * from t_test";
$stmt=$dbh->query($sql);
foreach( $stmt->fetchAll(PDO::FETCH_ASSOC) as $test):
?>
<tr>
<td><?php echo $test['header1'];?></td>
<td><?php echo $test['header2'];?></td>
<td><?php echo $test['header3'];?></td>
<td><?php echo $test['header4'];?></td>
<td><?php echo $test['header5'];?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>

f:id:kojikoji75:20140211220306j:plain

3.TablePagenationの使用感

tableにidをふっただけで簡単に実装できたのでビックリ。

動作としては他のjQueryページネーションと同じく、一度すべてのdbデータを読み込んでからそれを分割表示しているだけと思われるので、時間がある場合はきちんとしたページネーション処理を自作するか、フレームワークに付属の機能を使用するべき。

※ちなみに上図テーブルはcssフレームワーク「PURE」のpure-table-horizontalで整えています。

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)

Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative)

Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative)

タイトルとURLをコピーしました