Laravel分页
Laravel使用的过程中,有些功能把前端页面的表达“写死了”,比如分页的翻页按钮!
当然你会说Laravel的Bootstrap样式也很好看啊,但是实际项目中,翻页按钮常常需要满足的客户的需要,特别在开发一款支持手机适配的Web APP,更是需要使用自定义的样式。
所以,学习一样东西不能一知半解,而是究其原理。
先来看看Laravel是怎么分页的,生成分页按钮的代码究竟写在了哪里?
Laravel目录\vendor\laravel\framework\src\Illuminate\Pagination下
先理一下类的继承关系
PresenterContract(父类)
┗BootstrapThreePresenter(子类)<-SimpleBootstrapThreePresenter
┗BootstrapFourPresenter(子类)<-SimpleBootstrapFourPresenter
从作者对类的命名上看,必有区别,我们从代码上研究
BootstrapThreePresenter.php和BootstrapFourPresenter.php主要区别在下列函数
BootstrapThreePresenter.php代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
/** * Get HTML wrapper for an available page link. * * @param string $url * @param int $page * @param string|null $rel * @return string */ protected function getAvailablePageWrapper( $url , $page , $rel = null) { $rel = is_null ( $rel ) ? '' : ' rel="' . $rel . '"' ; return '<li><a href="' .htmlentities( $url ). '"' . $rel . '>' . $page . '</a></li>' ; } /** * Get HTML wrapper for disabled text. * * @param string $text * @return string */ protected function getDisabledTextWrapper( $text ) { return '<li class="disabled"><span>' . $text . '</span></li>' ; } /** * Get HTML wrapper for active text. * * @param string $text * @return string */ protected function getActivePageWrapper( $text ) { return '<li class="active"><span>' . $text . '</span></li>' ; } |
BootstrapFourPresenter.php代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
/** * Get HTML wrapper for an available page link. * * @param string $url * @param int $page * @param string|null $rel * @return string */ protected function getAvailablePageWrapper( $url , $page , $rel = null) { $rel = is_null ( $rel ) ? '' : ' rel="' . $rel . '"' ; return '<li class="page-item"><a class="page-link" href="' .htmlentities( $url ). '"' . $rel . '>' . $page . '</a></li>' ; } /** * Get HTML wrapper for disabled text. * * @param string $text * @return string */ protected function getDisabledTextWrapper( $text ) { return '<li class="page-item disabled"><a class="page-link">' . $text . '</a></li>' ; } /** * Get HTML wrapper for active text. * * @param string $text * @return string */ protected function getActivePageWrapper( $text ) { return '<li class="page-item active"><a class="page-link">' . $text . '</a></li>' ; } |
我们发现最大的区别在ThreePresenter几乎是“裸”HTML标签,而FourPresenter生成的是带class的HTML标签。
无论是ThreePresenter还是FourPresenter,他们都有一个相同实现的render()函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
/** * Convert the URL window into Bootstrap HTML. * * @return \Illuminate\Support\HtmlString */ public function render() { if ( $this ->hasPages()) { return new HtmlString(sprintf( '<ul class="pagination">%s %s %s</ul>' , $this ->getPreviousButton(), $this ->getLinks(), $this ->getNextButton() )); } return '' ; } |
细心的读者已经发觉,还有两个继承类,分别是SimpleThreePresenter和SimpleFourPresenter,既然是Simple(简单),区别就在他们的render()函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/** * Convert the URL window into Bootstrap HTML. * * @return \Illuminate\Support\HtmlString */ public function render() { if ( $this ->hasPages()) { return new HtmlString(sprintf( '<ul class="pager">%s %s</ul>' , $this ->getPreviousButton(), $this ->getNextButton() )); } return '' ; } |
也就是说,SimpleThreePresenter和SimpleFourPresenter生成的分页按钮是没有“页码”的,只有“上一页”和“下一页”按钮。