5
3

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.

laravel5のページネーションをbootstrap以外のUIKit等CSSフレームワークに適用させる方法

Last updated at Posted at 2016-07-19

前回書いたこれの続き( http://qiita.com/qwe001/items/a82054b45acaca164d7c
実は私の案件ではCSSフレームワークはbootstrapじゃなくてUIKitなんです。まじかよ。

何がしたいか

laravel5の純正のページネーション機能では次のようなHTMLタグが生成されると思います。

View「index.blade.php」

<div>{{ $items -> appends(['disp_list' => $items -> perPage()]) -> render() }}</div>

<div>
	<ul class="pagination">
		<li class="disabled"><span>«</span></li>
		<li class="active"><span>1</span></li>
		<li><a href="(サイトURL)?disp_list=5&amp;page=2">2</a></li>
		<li><a href="(サイトURL)?disp_list=5&amp;page=2" rel="next">»</a></li>
	</ul>
</div>

一方で、UIKitのページネーションのCSSは次のような記述が必要です。

<div>
	<ul class="uk-pagination">
		<li class="uk-disabled"><span><i class="uk-icon-angle-double-left"></i></span></li>
		<li class="uk-active"><span>1</span></li>
		<li><a href="(サイトURL)?disp_list=5&amp;page=2">2</a></li>
		<li><a href="(サイトURL)?disp_list=5&amp;page=2"><i class="uk-icon-angle-double-right"></i></a></li>
	</ul>
</div>

パッと見ただけでも各Class名に「uk-」が必要なんだなということがわかるかと思います。
jQueryのattrで変えようかな…とかも考えましたが、それは正解ではないなというのはわかっていたので、見つけた正解がこちら

結論:Landish Paginationを使う

インストール

ルートユーザーで実行してください

composer require landish/pagination

インストールが完了したら

composer update

実装

<div>{{ $items -> appends(['disp_list' => $items -> perPage()]) -> render() }}</div>

<div>{!! (new Landish\Pagination\UIKit($items -> appends(['disp_list' => $items -> perPage()]))) -> render() !!}</div>

おわり

え、これだけ?はい。これだけです。なんて簡単。ありがとう海外の神々よ。改宗しなきゃ。

5
3
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
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?