シンプルなページネータを表示するライブラリです。
$ composer require begien/simplepaginator:~1.0
or
composer.json
{
"require": {
"begien/simplepaginator": "~1.0"
}
}$ composer install
<?php
require_once __DIR__ . '/vendor/autoload.php';
require_once __DIR__ . '/config/config.php';
use Begien\Paginator; // 👈 このパッケージをインポートします
$pdo = connectDb(); // 👈 PDOインスタンス
$result_view_count = 2; // 👈 検索結果の最大表示数
$paginate_margin = 2; // 👈 ページネータで表示するボタンの余白の数
if (isset($_GET['max'])) {
$result_view_count = (int)h($_GET['max']);
}
$sql = 'select * from users order by id asc'; // 👈 "LIMIT"以外のsqlを作成
// 👇 ページネータ取得
$paginator = new Paginator(
$pdo,
$sql,
$result_view_count,
$paginate_margin,
);
$result = $paginator->result; // 👈 検索結果
$result_count = $paginator->result_count // 👈 ヒットしたデータの数
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページネーションテスト</title>
</head>
<body>
<style>
.paginate_button {
margin: 0 auto;
}
</style>
<div>
<?php echo $result_count; ?>件ヒットしました。
</div>
<form action="" method="get" name="form">
<input type="hidden" name="page" value=""><!-- 👈 submitするフォームにhiddenで指定してください -->
<label for="max">表示件数</label>
<select id="max" name="max">
<?php for ($i = 1;5 > $i;++$i) : ?>
<option
value="<?php echo $i; ?>"
<?php if ((int)$result_view_count === (int)$i) :?>
selected="selected"
<?php endif; ?>
>
<?php echo $i; ?></option>
<?php endfor; ?>
</select>
</form>
<ul>
<?php foreach ($result as $key => $user) : ?>
<li><?php echo $user['name'] ?></li>
<?php endforeach; ?>
</ul>
<?php $paginator->paginate(); ?><!-- 👈 ページネータを表示します -->
<script>
let max = document.getElementById('max');
let max_form = document.querySelector('[name="form"]');
max.addEventListener('change', function (e) {
max_form.submit();
});
</script>
</body>
</html>
<?php $paginator->paginate(); ?>ページネータを表示します
<form name="form" method="get">ページネータのボタンをクリックすると、テンプレート内のformを検索してsubmit処理を行います。
デフォルトではname="form"を検索してsubmitします。
<input type="hidden" name="page" value="">ページネータのボタンを押した際に、そのボタンの数字をセットするinputを必ず指定してください。
デフォルトではname="page"を検索して、valueをセットします
/**
* @var array $options{
* paginate_path: string,
* visible_prev_next: bool,
* visible_start_end: bool,
* form_name: string,
* page_name: string,
* background_color: array{
* default: string,
* selected: string,
* },
* color: array{
* default: string,
* selected: string,
* },
* }
*/
$options = Paginator::getDefaultOptions(); // 👈 デフォルトのオプションを取得できます-
paginate_path
デフォルトで用意しているテンプレート以外を利用したい場合、そのテンプレートのパスを指定します
デフォルトではこのライブラリで用意したテンプレートのパスが指定されています。
以下はデフォルトテンプレートです。カスタムテンプレート作成時に参考にしてください。
<?php
$is_visible_next = false;
$is_visible_prev = false;
$is_visible_start = false;
$is_visible_end = false;
?>
<style>
.begien_paginate_wrapper button {
border: 1px solid;
border-radius: 5px;
cursor: pointer;
background-color: <?php echo $this->background_color['default']; ?>;
color: <?php echo $this->color['default']; ?>;
}
.begien_paginate_wrapper button.selected {
background-color: <?php echo $this->background_color['selected']; ?>;
color: <?php echo $this->color['selected']; ?>;
}
</style>
<?php if ($this->count > 0) :?>
<div class="begien_paginate_wrapper">
<?php for ($i = 1;$this->count >= $i;++$i) : ?>
<?php if ($this->page > 1) : ?>
<?php if ($this->visible_start_end && !$is_visible_start) : ?>
<?php $is_visible_start = true; ?>
<button
type="button"
value="<?php echo 1; ?>"
class="paginate_button"
>
<<
</button>
<?php endif; ?>
<?php if ($this->visible_prev_next && !$is_visible_prev) : ?>
<?php $is_visible_prev = true; ?>
<button
type="button"
value="<?php echo $this->page - 1; ?>"
class="paginate_button "
>
<
</button>
<?php endif; ?>
<?php endif;?>
<?php if (($this->page - $this->margin) > $i) : ?>
<?php continue; ?>
<?php elseif (($this->page + $this->margin) < $i) : ?>
<?php break; ?>
<?php endif; ?>
<button
type="button"
value="<?php echo $i; ?>"
class="
paginate_button
<?php if ((int)$this->page === (int)$i) :?>
selected
<?php endif; ?>
"
>
<?php echo $i; ?>
</button>
<?php endfor; ?>
<?php if ($this->page < $this->count) : ?>
<?php if ($this->visible_prev_next && !$is_visible_next) : ?>
<?php $is_visible_next = true; ?>
<button
type="button"
value="<?php echo $this->page + 1; ?>"
class="paginate_button"
>
>
</button>
<?php endif; ?>
<?php if ($this->visible_start_end && !$is_visible_end) : ?>
<?php $is_visible_end = true; ?>
<button
type="button"
value="<?php echo $this->count; ?>"
class="paginate_button"
>
>>
</button>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endif; ?>
<script>
let buttons = document.getElementsByClassName('paginate_button');
let page_input = document.querySelector('[name="<?php echo $this->page_name; ?>"]');
for (let i = 0;buttons.length > i;++i) {
buttons[i].addEventListener('click', function (e) {
let page = e.target.value;
let form = document.querySelector('[name="<?php echo $this->form_name; ?>"]');
if (!form) {
form = this.closest('form') ?? document.querySelector('form');
}
page_input.value = page;
form.submit();
});
}
</script>-
visible_prev_next
ページネータの"前へ","次へ"を表示するかどうかを指定します
デフォルト: true -
visible_start_end
ページネータの"開始へ","最後へ"を表示するかどうかを指定します
デフォルト: true -
form_name
ページネータのボタンをクリックした際、submitさせたい
<form>のnameを指定します。
デフォルト: "form" -
page_name ページネータのボタンのvalueをセットする
<input>のnameを指定します
デフォルト: "page" -
background_color ページネータのボタンの背景色を指定します
default: 未選択時の色
selected: 選択時の色
デフォルト:
default: buttonface
selected: aqua -
color ページネータのボタンの数字の色を指定します
default: 未選択時の色
selected: 選択時の色
デフォルト:
default: black
selected: black
MIT
https://github.com/kamotetu
https://begien.com
遊んでくれれば幸いです。