扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
首先在列表模版写分页样式的时候把这段代码复制进去：
创新新互联，凭借10多年的成都做网站、网站建设经验，本着真心·诚心服务的企业理念服务于成都中小企业设计网站有上1000家案例。做网站建设，选成都创新互联。
div class="dede_pages"
ul class="pagelist"
{dede:pagelist listitem="info,index,end,pre,next,pageno,option" listsize="5"/}
/ul
/div
然后在把css样式加入到你自己的css文件里面
.dede_pages{ height:30px; background:#eeeeee; margin:15px 015px 12px; width:690px; float:left;text-align:center; display:inline;
}
.dede_pages ul{
list-style-type: none;text-align: center;
}
.dede_pages ul li{
display: inline;
}
.dede_pages ul li a{
background:#fff; padding:3px 5px; line-height:30px; margin:0 2px; font-family:Arial;
}
.dede_pages ul li a:hover{
color:#690;
text-decoration:none;
padding:2px 4px 2px;
}
.dede_pages ul li.thisclass,
.dede_pages ul li.thisclass a,.pagebox ul li.thisclass a:hover{
background-color:#F8F8F8;
padding:2px 4px 2px;
font-weight:bold;
}
.dede_pages .pageinfo{
line-height:21px;
padding:12px 10px 12px 16px;
color:#999;
}
.dede_pages .pageinfo strong{
color:#555;
font-weight:normal;
margin:0px 2px;
}
[img]用CSS是不能分页的，分页是程序控制的。
比如说：有100条数据要在页面展示，每次展现10条，一共10页。
程序会在第一页取出1--10条数据给静态页面展示。
到第二页的时候在去11--20条数据给静态页面展示。
当然你要给程序相对应的参数，他才能从数据库里面取出来。
美工只做一个展现页面给程序员，分页就是在静态页面上某个位置写上“上一页”、“下一页”、“第一页”、“最后一页”“共多少页”，或者是数字的1、2、3、4、5、6那种，剩下的程序员就会搞定一切的。
CSS只能做装饰，不能分页。
调用代码
div class="pagination-wrapper"
div class="pagination"
{dede:pagelist listsize='5' listitem='info,index,end,pre,next,pageno'/}
/div
/div
css样式一
/*pages*/
.pagination-wrapper {
clear:both;
padding:1em 0 2em 0;
text-align:center;
}
.pagination {
display: inline-block;
*display: inline;
*zoom: 1;
font-size:12px;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.pagination li{
list-style: none;
display: inline;
float: left;
line-height: 1em;
text-decoration: none;
border: 1px solid #ddd;
border-left-width: 0;
}
.pagination li a {
display: inline-block;
padding: .5em .8em;
background-color: #f9f9f9;
color: #999;
}
.pagination li a:link{
background:#fff;
color: #4C78A5;
}
.pagination li a:hover{
text-decoration:none;
}
.pagination li a:link:hover {
color: #000;
}
.pagination li.thisclass {
background-color: #f9f9f9;
color:#999;
}
.pagination li:first-child {
border-left-width: 1px;
border-radius: 3px 0 0 3px;
}
.pagination li:last-child{
border-radius: 0 3px 3px 0;
}
.pagination .pageinfo{
color: #444;
}
css样式二
/*pages*/
.pagination-wrapper{
margin: 20px 0;
}
.pagination{
height: 34px;
text-align: center;
}
.pagination li {
display: inline-block;
height: 34px;
margin-right: 5px;
}
.pagination li a{
float: left;
display: block;
height: 32px;
line-height: 32px;
padding: 0 12px;
font-size: 16px;
border: 1px solid #dddddd;
color: #555555;
text-decoration: none;
}
.pagination li a:hover{
background:#f5f5f5;
color:#0099ff;
}
.pagination li.thisclass {
background: #09f;
color: #fff;
}
.pagination li.thisclass a,.pagination li.thisclass a:hover{
background: transparent;
border-color: #09f;
color: #fff;
cursor: default;
}
可以啊，CSS样式可以改变THINKPHP 分页显示样式；这个在你模板赋值的时后做的！
我们可以对输出的分页样式进行定制，分页类 Page 提供了一个 setConfig 方法来修改默认的一些设置。例如：
$page-setConfig('header', ' 个会员 ' );
setConfig 方法支持的属性包括：
header ：头部描述信息，默认值 “条记录”
prev ：上一页描述信息，默认值是“上一页”
next ：下一页描述信息，默认值是“下一页”
first ：第一页描述信息，默认值是“第一页”
last ：最后一页描述信息，默认值是“最后一页”
theme ：分页主题描述信息，包括了上面所有元素的组合 ，设置该属性可以改变分页的各个单元的显示位置，默认值是
“ %totalRow% %header% %nowPage%/%totalPage% 页 %upPage% %downPage% %first% %prePage% %linkPage% %nextPage% %end% ”
通过 setConfig 设置以上属性可以完美的定制出你的分页显示风格。
edecms的arclist循环中，判断如果是第一个li，则添加固定的css，否则不加
写法如下：
{dede:arclist row=4 flag='p'}
li [field:global name=autoindex runphp="yes"](@me==1)? @me="class=on":@me="";[/field:global][field:global.autoindex/]/li
{/dede:arclist}
[field:global name=autoindex runphp="yes"](@me==1)? @me="class=on":@me="";[/field:global]
这句话的意思就是，如果循环出的是第一个，则添加class=on，否则为空。
注意：红色部分有两个等号。
新建一个thinkphp项目tp,入口文件如下:
2
在数据库think下新建表qq_game，结构如下：
3
新建一个控制器AdminAction.class.php，位置如图所示：
4
在此控制器下新建函数beauty_page，用于美化分页；
未设置自定义分页时，函数如图：
模板页：tp/App/Tpl/Admin/beauty_page.html ， 内容如图：
分页结果如下：
thinkphp中通过分页类Page提供的方法setConfig，来修改分页的设置：
比如：在代码 $pg = new Page($count, $per_page); 后插入下面的分页设置代码：
此时，分页显示结果如下（其中的上一页、下一页被改变）：
Page类提供的setConfig方法，还可以设置theme 作为分页主题描述信息。
设置该属性可以改变分页的各个单元的显示位置，默认值是：
"%totalRow% %header% %nowPage%/%totalPage% 页 %upPage% %downPage% %first% %prePage% %linkPage% %nextPage% %end%"
可以通过改变该值的样式改变分页的样式。
比如：在列表页添加样式：如下：
结果显示如下：
也可以给记录总数添加样式，如图，给当前记录数，添加样式：
在模板页添加样式，如图：
结果显示：
总结：可根据自己的爱好，自行添加样式，其中.pages a , .pages .current 是自带的，最好不要修改名称，可修改样式；如果不满意，可参考第11步，自行修改。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网