CodeIgniter4、Mysqlはすでにインストールされている状態からシンプルなページネーションを実装する方法です。
環境はPHP7.3.19, CodeIgniter4.0.4, MariaDB 10.3.27です。
CodeIgniter4のインストールは下記公式ページを参照してください。
目次
モデルの設定
データベースの設定は、.envかapp/config/Database.phpにて行ってください。
app/config/ModelsにTestModel.phpファイルを配置します。 テーブル名は”test_tbl”でカラムはそれぞれ ’id’, ‘last_name’, ‘first_name’, ‘number’があります。
namespace App\Models;
use CodeIgniter\Model;
class TestModel extends Model{
protected $table = 'test_tbl';
protected $primaryKey = 'id';
protected $returnType = 'array';
protected $useSoftDeletes = false;
protected $allowedFields = ['id', 'last_name', 'first_name', 'number'];
protected $useTimestamps = false;
//protected $createdField = 'created_at';
//protected $updatedField = 'updated_at';
//protected $deletedField = 'deleted_at';
protected $validationRules = [];
protected $validationMessages = [];
protected $skipValidation = false;
}
ルートの設定
app/config/Routes.phpに以下の設定を行い、http://yoursite/でコントローラーHomeのhomeメソッドを読み込みます。
$routes->get('/', 'Home::home');
コントローラーの設定
app/config/ControllersにHome.phpを配置します。
app/config/Views/home.phpに表示するように設定します。
<?php namespace App\Controllers;
//ネームスペースをインポートする
use App\Models\TestModel;
class Home extends BaseController
{
public function __construct(){
$this->db=\Config\Database::connect();
//Services::pagerをロードする
$pager = \Config\Services::pager();
}
public function home()
{
//テストモデルを呼び出す
$testModel = new TestModel();
$testData = [
//データを'dummyData'にセットする
'dummyData' => $testModel->paginate(15),
//ページネーションデータを'pager'にセットする
'pager' =>$testModel->pagerを設定します。
];
return view('home', $testData);
}
}Viewの設定をする前に、データが読み込まれているかテストします。
//return view('home', $testData);
をコメントアウトし、
echo <pre>; を追記します。
print_r($testData['dummyData']);
ブラウザにてhttp/yoursite/でダミーデータが表示されるか確かめてみましょう。 下記にように表示されればデータは$testData[‘dummyData’]まで渡されています。 表示されない場合はどこかに問題があるため、設定を見直します。
ダミーデータには、idとnumber列には１から始まる通し番号が、lass_nameとfirst_name列にはそれぞれabc001とxyz001から始まる通し番号が10000まで入っています。データベースに入力されたデータが表示されれば成功です。
Array
(
[0] => Array
(
[id] => 1
[last_name] => abc001
[first_name] => xyz001
[number] => 1
)
[1] => Array
(
[id] => 2
[last_name] => abc002
[first_name] => xyz002
[number] => 2
)
[2] => Array
(
[id] => 3
[last_name] => abc003
[first_name] => xyz003
[number] => 3
)
[3] => Array
(
[id] => 4
[last_name] => abc004
[first_name] => xyz004
[number] => 4
)
データが確認できたので、
echo <pre>;
print_r($testData['dummyData']);
を削除し、return view('home', $testData);
の//を削除して復活させます。
Viewファイルの設定
app/Views/Pagers以下にPagerファイルを配置し、上記の$testModel->pagerを設定します。
まず、app/config/Pagers.phpファイルを開き、テンプレートにファイルを追加します。 ここではテストデータ用にtest-index.phpを追加しますので、これを追加します。
public $templates = [
'default_full' => 'CodeIgniter\Pager\Views\default_full',
'default_simple' => 'CodeIgniter\Pager\Views\default_simple',
'default_head' => 'CodeIgniter\Pager\Views\default_head',
//下記を追記する
'test_pagination' =>'App\Views\Pagers\test-index'
];
次にapp/Views/Pagersフォルダに’test-index.php’を配置します。
<?php $pager->setSurroundCount(3) ?>
<nav aria-label="Page navigation">
<ul class="pagination">
<?php if ($pager->hasPrevious()) : ?>
<li class="page-item">
<a href="<?= $pager->getFirst() ?>" class="page-link" aria-label="<?= lang('Pager.first') ?>>
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item">
<a href="<?= $pager->getPrevious() ?>" class="page-link" aria-label="<?= lang('Pager.previous') ?>">
<span aria-hidden="true">‹</span>>
</a>
</li>
<?php endif ?>
<?php foreach ($pager->links() as $link) : ?>
<li <?= $link['active'] ? >'class="active page-item"' : 'class="page-item"' ?>>
<a href="<?= $link['uri'] ?>" class="page-link">
<?= $link['title'] ?>
</a>
</li>
<?php endforeach ?>
<?php if ($pager->hasNext()) : ?>
<li class="page-item">
<a href="<?= $pager->getNext() ?>" class="page-link" aria-label="<?= lang('Pager.next') ?>">
<span aria-hidden="true">›</span>
</a>
</li>
<li class="page-item">
<a href="<?= $pager->getLast() ?>" class="page-link" aria-label="<?= lang('Pager.last') ?>">
<span aria-hidden="true">»</span>
</a>
</li>
<?php endif ?>
</ul>
</nav>
これがテーブルのコントローラーにわたされ、ページネーション表示のもとデータになります。
この後にapp/Views/フォルダに実際に表示するhome.phpを作成します。
<table>
<tbody>
<tr>
<th>ID</th>
<th>Last Name</th>
<th>First Name</th>
<th>Number</th>
</tr>
<?php
//コントローラーのdummyDataがここで渡されてテーブルを表示する。
foreach($dummyData as $row):
$id = $row['id'];
$lastName = $row['last_name'];
$firstName = $row['first_name'];
$number = $row['number'];
?>
<tr>
<td><?php echo $lastName?></td>
<td><?php echo $firstName = $row['first_name'];?></td>
<td><?php echo $number?></td>
</tr>
<?php endforeach?>
</tbody>
</table>
//コントローラーのpagerがここで渡され、ページネーションリンクが表示される。
<?= $pager->links(); ?>
ブラウザで確認すると
ID Last Name First Name Number
1 abc001 xyz001 1
2 abc002 xyz002 2
3 abc003 xyz003 3
4 abc004 xyz004 4
5 abc005 xyz005 5
6 abc006 xyz006 6
7 abc007 xyz007 7
8 abc008 xyz008 8
9 abc009 xyz009 9
10 abc010 xyz010 10
11 abc011 xyz011 11
12 abc012 xyz012 12
13 abc013 xyz013 13
14 abc014 xyz014 14
15 abc015 xyz015 15
・1
・2
・3
Next
Last
のようになり、ページリンクが表示されるようになりました。
CSSの設定
ページのリンクが見にくいので、CSSを設定します。
ブラウザの検証でページリンクを見ると ulタグの属性が”pagination”となっています。
<ul class="pagination"></ul>
これはViews/Pager/test-index.phpから来ています。 そこで、CSSに下記の設定をします。
.pagination{
list-style: none;
}
.pagination li{
display: inline;
padding-left: 10px;
}
ブラウザを再読み込みすると
1 2 3 Next Last
横並びになりました。
次回は、もっと使いやすく、見やすいページネーションにするために、BootstrapとDataTablesを使った方法を紹介します。
次回の記事：CodeIgniter4にBootstrap、DataTablesを使ったページネーション
——ホタイブログ—–
関連記事
Chart.js 複数軸で右表示しない、min/max設定ができない
CodeIgniter4 MS SQL SERVERの接続
CodeIgniter4 複数のデータベースを設定する
JSONを使ったDataTablesに編集ボタンを実装する。
CodeIgniter4にJSONを使ってDataTablesを実装する
CodeIgniter4にBootstrap、DataTablesを使ったページネーション
コメント