在开发中,后台页面必不可少要用到分页,许多框架有自带的分页类,用起来也很方便,但是这些分页插件并不是万能的,例如,如果在弹窗的窗口中需要分页,就不能很好的适用,这个时候,只能自己写了,通过接口传递给前端渲染了
分页按钮css样式
<html>
<style type="text/css">
.pagination {
float: right;
padding: 10px;
background-color: #fff;
height: 34px; }
.pagination a,
.pagination li span {
background-color: #fff;
border: 1px solid #e8e8e8;
border-right-width: 0;
display: block;
line-height: 32px;
padding: 0 12px; }
.pagination ul {
float: left;
border-radius: 4px;
display: inline-block; }
.pagination li {
float: left; }
.pagination li:first-child a,
.pagination li:first-child span {
border-left-width: 1px;
border-radius: 4px 0 0 4px; }
.pagination li:last-child a,
.pagination li:last-child span {
border-right-width: 1px;
border-radius: 0 4px 4px 0; }
</style>
</html>
分页php代码
<php>
/**
*@param $page 当前页
*@param $count 总页数
*@param $url 请求地址
*/
public function pages($page, $count, $url)
{
$page = empty($page) ? 1 : $page;
$page_div = '';
$rand = rand(0, 1000);
$prev_url = $page == 1 ? "javascript:;" : $url . "?v=param" . $rand . "&page=" . ($page - 1);
$prev_disabled = $page == 1 ? 'disabled' : '';
$prev_page = $page == 1 ? 1 : $page - 1;
$page_div .= "<ul class='pagination'><li class='prev " . $prev_disabled . "'><a href='" . $prev_url . "' data-page='" . $prev_page . "'>«</a></li>";
if ($count <= 10) {
$start_page = 1;
$end_page = $count;
} else {
$end_page = $page + 4 > $count ? $count : ($page + 4 < 10 ? 10 : $page + 4);
$start_page = $end_page - 9 > 0 ? $end_page - 9 : 1;
}
for ($i = $start_page; $i <= $end_page; $i++) {
$active = $page == $i ? 'active' : '';
$page_div .= " <li class='" . $active . "'><a href='" . $url . "' data-page='" . $i . "' >" . $i . "</a></li>";
}
$next_url = $page == $count ? "javascript:;" : $url . "?v=param" . $rand . "&page=" . ($page + 1);
$next_disabled = $page == $count ? 'disabled' : '';
$next_page = $page == $count ? $page : $page + 1;
$page_div .= "<li class='next " . $next_disabled . "'><a href=" . $next_url . " data-page=" . $next_page . ">»</a></li></ul>";
return $page_div;
}
</php>
然后就是找个合适的地方放置$page_div就好了
附上一张效果图: