分页组件

CSS

.pagelist {
    margin: 0;
    padding: 20px 0;
    text-align: center;
}
.pagelist ul {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}
.pagelist li {
    display: inline-block;
    margin-right: 3px;
    border: 1px solid grey;
    min-width: 25px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.pagelist li a {
    padding: 2px 2px;
    display: block;
}

前端页面组件

<div class="pagelist">
    <ul>
        <li><a href="<?php echo $pagelist['first_page']; ?>">首页</a></li>
        <?php

            foreach ($pagelist['nearby_page'] as $pageinfo) {
                ?>
                <li><a href="<?php echo $pageinfo[1]; ?>"><?php echo $pageinfo[0]; ?></a></li>
        <?php
            }
        ?>
        <li><a href="<?php echo $pagelist['end_page']; ?>">尾页</a></li>
    </ul>
</div>

分页方法

	const PAGE_SEG_SIZE = 6; // 翻页区间大小

    /**
	 * 翻页工具
	 * @param $uri
	 * @param $page
	 * @param $pagesize
	 * @param $total
	 * @param $search
	 * @return array
	 */
	public function make_pagelist($uri, $page, $pagesize, $total, $search) {
		// 参数
		$querystring = [
			'page' => 0,
			'pagesize' => $pagesize,
			'search' => $search,
		];

		// 页码
		$pagelist = [];

		// 首页
		$querystring['page'] = 1;
		$pagelist['first_page'] = $uri . '?' . http_build_query($querystring);

		// 当前页
		$pagelist['cur_page'] = $page;

		// 末页
		$end_page = intval($total / $pagesize) + ($total % $pagesize ? 1 : 0);
		$end_page = $end_page ? $end_page : 1;
		$querystring['page'] = $end_page;
		$pagelist['end_page'] = $uri . '?' . http_build_query($querystring);

		// 附近页码
		$querystring['page'] = $page;
		$pagelist['nearby_page'] = [[$page, $uri . '?' . http_build_query($querystring)]];

		$offset = 1;
		while (count($pagelist['nearby_page']) < self::PAGE_SEG_SIZE) {
			$more_page = false;
			// 向前翻页
			if ($page - $offset >= 1) {
				$querystring['page'] = $page - $offset;
				array_unshift($pagelist['nearby_page'], [$querystring['page'], $uri . '?' . http_build_query($querystring)]);
				$more_page = true;
			}
			// 向后翻页
			if (count($pagelist['nearby_page']) == self::PAGE_SEG_SIZE) {
				break;
			}
			if ($page + $offset <= $end_page) {
				$querystring['page'] = $page + $offset;
				$pagelist['nearby_page'][] = [$querystring['page'], $uri . '?' . http_build_query($querystring)];
				$more_page = true;
			}
			if (!$more_page) {
				break;
			}
			++$offset;
		}
		return $pagelist;
	}

调用

	public function lanmu_list(){
		$search_name = $this->input->zget_post('search_name','');
		$page = $this->input->zget_post('page',1);
		$page_size = $this->input->zget_post('page_size',10);
		$res  = $this->lanmu_biz->get_lanmu_list($search_name,$page,$page_size);
		$data['data'] = $res['data'];
		$data['pageinfo'] = [
			'pagelist' => $this->make_pagelist('/lanmu/lanmu_list', $page, $page_size, $res['total'], $search_name),
			'page'     => $page,
			'page_size'  => $page_size,
		];
		$this->load->view('lanmu/lanmu_list_tpl',$data);
	}

此方法是在CI框架的基础上应用的,如果想用在原生代码或者其他框架酌情更换语法

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值