在實(shí)際的項(xiàng)目開(kāi)發(fā)過(guò)程中,分頁(yè)是我們經(jīng)常需要做的一個(gè)工作,那么今天雅騰教育介紹輕量級(jí)PHP分頁(yè)組件之Paginator的使用;Paginator是一個(gè)非常輕量小巧的PHP分頁(yè)組件。當(dāng)我們數(shù)據(jù)比較多的時(shí)候,需要使用分頁(yè)來(lái)方便瀏覽,Paginator可以時(shí)頁(yè)面中優(yōu)雅的顯示分頁(yè)條,顯示首頁(yè)和尾頁(yè)以及中間幾頁(yè),多出的頁(yè)數(shù)使用三點(diǎn)代替,符合我們預(yù)期,此外也可以試用移動(dòng)端。
安裝
使用composer安裝,如果還不會(huì)composer請(qǐng)參考:http://www.phpcomposer.com/
composer require "jasongrimes/paginator:~1.0"
基本使用
安裝好了,直接引入,設(shè)置幾個(gè)參數(shù)即可渲染網(wǎng)頁(yè)。注意這里我們使用了bootstrap樣式。
<?php require '../vendor/autoload.php'; use JasonGrimes\Paginator; $totalItems = 1000; //總頁(yè)數(shù) $itemsPerPage = 50; // 每頁(yè)顯示數(shù) $currentPage = 8; // 當(dāng)前所在頁(yè)數(shù) $urlPattern = '/foo/page/(:num)'; // 定義跳轉(zhuǎn)地址 $paginator = new Paginator($totalItems, $itemsPerPage, $currentPage, $urlPattern); ?> <html> <head> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <?php echo $paginator; ?> </body> </html>
使用瀏覽器你會(huì)看到這個(gè)效果:
是不是很漂亮,查看網(wǎng)頁(yè)生成的源代碼會(huì)發(fā)現(xiàn):
<ul class="pagination"> <li><a href="/foo/page/7">? Previous</a></li> <li><a href="/foo/page/1">1</a></li> <li class="disabled"><span>...</span></li> <li><a href="/foo/page/5">5</a></li> <li><a href="/foo/page/6">6</a></li> <li><a href="/foo/page/7">7</a></li> <li class="active"><a href="/foo/page/8">8</a></li> <li><a href="/foo/page/9">9</a></li> <li><a href="/foo/page/10">10</a></li> <li><a href="/foo/page/11">11</a></li> <li><a href="/foo/page/12">12</a></li> <li class="disabled"><span>...</span></li> <li><a href="/foo/page/20">20</a></li> <li><a href="/foo/page/9">Next ?</a></li> </ul>
所以,我們可以根據(jù)項(xiàng)目需求自定義CSS樣式來(lái)改變分頁(yè)條的外觀,但bootstrap的風(fēng)格已經(jīng)挺好了。
自定義分頁(yè)
我們可以使用$paginator->getPages(), $paginator->getNextUrl(), 以及$paginator->getPrevUrl()來(lái)更好的控制HTML輸出。
<?php $html = '<ul class="pagination">'; if ($paginator->getPrevUrl()) { $html .= '<li><a href="' . $paginator->getPrevUrl() . '">? 上一頁(yè)</a></li>'; } foreach ($paginator->getPages() as $page) { if ($page['url']) { $html .= '<li' . ($page['isCurrent'] ? ' class="active"' : '') . '><a href="' . $page['url'] . '">' . $page['num'] . '</a></li>'; } else { $html .= '<li class="disabled"><span>' . $page['num'] . '</span></li>'; } } if ($paginator->getNextUrl()) { $html .= '<li><a href="' . $paginator->getNextUrl() . '">下一頁(yè) ?</a></li>'; } $html .= '</ul>'; echo $html; ?>
如果是在移動(dòng)端應(yīng)用,可以將數(shù)字分頁(yè)收起來(lái),換成下拉選取分頁(yè)的方式,節(jié)省空間也方便操作,具體代碼請(qǐng)查看本文演示DEMO。
Paginator項(xiàng)目在Github上的地址是:https://github.com/jasongrimes/php-paginator。