0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【Cakephp2.x】 BoostCake3で Bootstrap4のPaginationを使いたい。

Last updated at Posted at 2019-09-13

初投稿です。
誤字・脱字・間違い等あればご指摘お願いします。
拙いところがあるかもしれませんがよろしくお願いします。

この記事はCakephp2.xで、BoostCake3を使ってなんとかBootstarp4の
ページネーション機能を使おうとしています。
ですのでまだBoostCakeを導入していない方は先に導入の方をお願いします。


参考: CakePHP BoostCake の導入手順

コードから先に載せます。

test.php
<!-- ページネーション -->
<nav aria-label="Page navigation example">
	<ul class="pagination">
		<?php
		$this->Paginator->options(array('class' => 'page-link'));
		echo $this->Paginator->prev(__('Previous'), array('tag' => 'li class="page-item"'));
		echo $this->Paginator->numbers(array('currentTag' => 'a class="page-link"'));
		echo $this->Paginator->next(__('Next'), array('tag' => 'li class="page-item"'));
		?>
	</ul>
</nav>

$this->Paginator->options(array('class' => 'page-link'))は、
前へ・次へ・全てのページ番号にpage-linkクラスが付属されるようにするためのメソッドです。
opitionsで渡されたクラスを一つ一つの要素に付属してくれます。

prev() numbers() next()メソッドには、
タグに必要なクラスであるpage-itempage-linkを付属させています。

表示結果こうなりました。

    スクリーンショット 2019-09-13 16.03.02.png

残念ながら、現在表示しているページ番号の背景が青く塗り潰される機能と、
ページ端に来た時に、前へ/次へボタンがグレーアウトする機能は実装できませんでした。
これらを実装するにはプラグインの中身を弄るか、PaginatorHelperを継承した独自ヘルパーでオーバーライドする必要があります。

お察しの通りこのコードはプラグインの機能を全く使っていないのですが、
BoostCakeプラグインを適用しないとこうなります。

    スクリーンショット 2019-09-13 16.13.15.png

page-linkクラスが前へ/次へボタンに付属してくれないので変になっちゃうんです。
これだけのためにプラグインを使うのはなんだかなーと思いますが、
オーバーライド等をしないで、無理くり出来ないか考えた結果の末です。
もっと楽にできる方法があればコメントでご教授頂けるととても有り難いです。

誰かのお役に立てれば幸いです。
以上です。

参考:bootstrap4でcakePHPのページングを実装したい

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?