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

１．TablePagenationのダウンロード

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

301 Moved Permanently

neoalchemy.org

必要なのは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>

３．TablePagenationの使用感

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

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

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