TechNote

事務屋のおぼえがき

最も簡単なテーブルのページネーション用プラグイン 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.htmlhttp://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で整えています。


あわせて読みたい

jQueryでオシャレかつ機能的なフォーム画面を実装 formly.js - TechNotejQueryでオシャレかつ機能的なフォーム画面を実装 formly.js - TechNote

社内システムだったら必ずフォームのPost送信は多用するし、Webサイトであっても入力画面が存在するところには必ずフォームは必要となる。そんなとき、簡単にオシャ...

jQueryでスライダー機能を実装 - 横幅いっぱいのスライダーFullWideSlider - TechNotejQueryでスライダー機能を実装 - 横幅いっぱいのスライダーFullWideSlider - TechNote

以前のエントリーjQueryでスライダー機能&#...

BootStrap 向けのdatepickerによるカレンダー実装は簡単便利 だけどieには不向きか - TechNoteBootStrap 向けのdatepickerによるカレンダー実装は簡単便利 だけどieには不向きか - TechNote

BootStrap向けのdatepickerによるカレンダー実装が簡単かつ便利だったので使用方法をメモ。1.ダウンロード現在はちゃんと日本語対応版も出ているよう...