tp3.2分页样式

全栈程序员站长

发布于 2022-09-09 11:27:11

4190

发布于 2022-09-09 11:27:11

大家好，又见面了，我是你们的朋友全栈君。

首先要搞清楚的就是ThinkPHP3.2.3的分页类已经被移到了Think\Page.class.php,这是跟以前的版本有些不一样的，使用起来还是跟以前版本差不多，但是默认的效果不敢恭维，所以最好是自己加些样式。我加了一些样式(不怎么好看)，大家可以自行的再去改进分页样式，效果图：

在这里我有先把page的设置做成了一个函数getpage，将这个方法放到Application\Common\Common\function.php(注意function不是类)中方便其他地方调用，代码如下：

/**
 * TODO 基础分页的相同代码封装，使前台的代码更少
 * @param $count 要分页的总记录数
 * @param int $pagesize 每页查询条数
 * @return \Think\Page
 */
function getpage($count, $pagesize = 7) {
    $p = new Think\Page($count, $pagesize);
    $p->setConfig('header', '<li class="rows">共<b>%TOTAL_ROW%</b>条记录 第<b>%NOW_PAGE%</b>页/共<b>%TOTAL_PAGE%</b>页</li>');
    $p->setConfig('prev', '上一页');
    $p->setConfig('next', '下一页');
    $p->setConfig('last', '末页');
    $p->setConfig('first', '首页');
    $p->setConfig('theme', '%FIRST%%UP_PAGE%%LINK_PAGE%%DOWN_PAGE%%END%%HEADER%');
    $p->lastSuffix = false;//最后一页不显示为总页数
    return $p;
}

控制器中使用的代码如下：

public function showAllUsers() {
        $m = M('User');      
        $where = "id>10";
        $count = $m->where($where)->count();
        $p = getpage($count,1);
        $list = $m->field(true)->where($where)->order('id')->limit($p->firstRow, $p->listRows)->select();
        $this->assign('list', $list); // 赋值数据集
        $this->assign('page', $p->show()); // 赋值分页输出
        $this->display();
    }

接下来在View中的使用：

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--分页的样式，这里可以单独写成一个css文件-->
		<style>
			.pages a,
			.pages span {
				display: inline-block;
				padding: 2px 5px;
				margin: 0 1px;
				border: 1px solid #f0f0f0;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				border-radius: 3px;
			}
			
			.pages a,
			.pages li {
				display: inline-block;
				list-style: none;
				text-decoration: none;
				color: #58A0D3;
			}
			
			.pages a.first,
			.pages a.prev,
			.pages a.next,
			.pages a.end {
				margin: 0;
			}
			
			.pages a:hover {
				border-color: #50A8E6;
			}
			
			.pages span.current {
				background: #50A8E6;
				color: #FFF;
				font-weight: 700;
				border-color: #50A8E6;
			}
		</style>
	</head>
 
	<body>
 
		<div class="pages">
			{$page}
		</div>
 
	</body>
 
</html>

经过以上步骤就可以完成了

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/160621.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

https