前回はCodeIgniter4を使ったシンプルなページネーションを紹介しましたが、今回はBootstrapとjQueryのDataTAblesを使ったページーションをを紹介します。
表示件数、サーチ、ソートなどが簡単に実装できました。ただ読み込み速度が遅いという欠点がありますが、その点については次回にJSONを使った方法を紹介していきたいと思います。
環境はPHP7.3.19, CodeIgniter4.0.4, MariaDB 10.3.27です。
目次
Bootstrap、jQuery、DataTablesの準備
bootstrap-pagination.phpというファイルをViewsフォルダに作成します。
このファイルにテーブルを表示させていきます。
下記ページよりBootstrapをhtmlファイルに貼り付け、CDNで読み込みます。
jQueryはBootstrapの前に読み込むようにしてください。
Bootstrap CDNリンク
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
下記ページより、DataTablesのCDNをコピーします。今回は、Bootstrap4.3.3を使用しているので、Bootstrap4のボタンを押します。Releaseの下のCSSとJSのリンクを下記のhrefの中に貼り付けます。
ただ今回は、指定リンクのCSS「https://cdn.datatables.net/1.10.23/css/」を使用したところ、ページネーションボタンの読み込みができない（表示はされるが、CSSが読み込まれずフォーマットが効かない）という不具合が発生しました。これをhttps://cdn.datatables.net/1.10.23/css/」に変更したところ通常通りに読み込まれるようになりました。そのため、下記の例では「1.10.21」を使用しています。
DataTablesのCDNリンク
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
ルートとコントローラーの設定
app/Config/Routes.phpに下記を追記します。
URLはテーブルを表示させるファイル名と同じにし、コントローラーは、前回のシンプルなページネーションで使用したHomeに新しくbootstrapPaginationというメソッドを追加していきます。
$routes->get('/bootstrap-pagination', 'Home::bootstrapPagination');
app/Config/Controllersに前回作成したコントローラーHome.phpがありますので、そこに下記のbootstrapPaginationメソッドを追記します。
モデルと同じものを使用しますので、前回の記事を参照ください。
まずは前回と同様に、データが読み込まれているか確認しましょう。
public function bootstrapPagination()
{
$testModel = new TestModel();
$testData = [
'dummyData'=>$testModel->findAll()
];
//データを呼び出して、確認する。
echo '<pre>';
print_r($testData['dummyData']);
}
http://yoursite/bootstrap-paginationでデータが読み込まれているか確認できたら、
echo '<pre>';
print_r($testData['dummyData']);
を削除するかコメントアウトし、return view('bootstrap-pagination', $testData);を追記する。
bootstrap-pagination.phpに$dummyDataを送ります。
これで、データをviewファイルに渡す準備ができました。
ビューファイルにテーブルを表示する。
bootstrap-pagination.php ファイルにテーブルを作成します。
下記の内容で、viewファイに渡されたdummyDataを読み込み、テーブルが
<body>
<h1>CodeIgniter4 DataTablesを使ったページネーション</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Last Name</th>
<th>First Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<?php
foreach($dummyData as $row):
$id = $row['id'];
$lastName = $row['last_name'];
$firstName = $row['first_name'];
$number = $row['number'];
?>
<tr>
<td><?php echo $id?></td>
<td><?php echo $lastName?></td>
<td><?php echo $firstName?></td>
<td><?php echo $number?></td>
</tr>
<?php endforeach?>
</tbody>
</table>
</body>
http://yoursite/bootstrap-paginationを再読み込みすると、テーブルが作成されていることが確認できます。
<thead>と<tbody>は必ず設定してください。また<thead>と<tbody>の数が異なるとDataTablesでエラーになります。
DataTablesの実装
テーブルを指定するために、テーブルにidをつけます。「table-datatable」とします。
<table id="table-datatable"></table>
下記jQueryコードを貼り付けます。
<script>
$(document).ready( function ($) {
// テーブルのIDを下記に指定してください。
$('#table-datatable').dataTable();
} );
</script>
ブラウザを再読込すると、表示件数の指定、サーチ、行頭のソートが確認できます。
DataTablesの設定
下記のように、DataTablesの初期設定行数、指定できる行数などを設定する。
<script>
$(document).ready( function () {
$('#table-datatable').dataTable({
//初期表示の昇順・降順を指定する。下記は２列名を降順に指定
order:[[ 1, "desc" ]],
//表示行数を20行、50行、100行、200行から指定できるように設定
lengthMenu: [20, 50, 100, 200],
//初期値の表示件数の設定
displayLength: 20
});
} );
</script>
Bootstrapで見た目を整える
bootstrapのタグ設定を行い、ストライプ表示等見た目を整えます。テーブルタグにBootstrapクラスを追記します。
<table class="table table-sm table-bordered table-striped table-hover" id="table-datatable"></table>
以上で完成です。その他のフォーマットなどは、Bootstrapの公式サイトを参照ください。
ただブラウザを再読込するスピードが遅いです。JSONでデータを渡すと速くなるとのことなので、次回はJSONを使ってみます。
次の記事 CodeIgniter4にJSONを使ってDataTablesを実装する
——ホタイブログ—–
関連記事
Chart.js 複数軸で右表示しない、min/max設定ができない
CodeIgniter4 MS SQL SERVERの接続
CodeIgniter4 複数のデータベースを設定する
JSONを使ったDataTablesに編集ボタンを実装する。
CodeIgniter4にJSONを使ってDataTablesを実装する
CodeIgniter4 シンプルなページネーションの実装
コメント