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

f:id:kojikoji75:20150801210323j:plain

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

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

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

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

１．TablePagenationのダウンロード
２．TablePagenationの設置方法
３．TablePagenationの使用感

１．TablePagenationのダウンロード

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

301 Moved Permanently

http://neoalchemy.org/tablePagination.html

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

２．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>