Question

ThinkPHP分页样式CSS代码

我用ThinkPHP框架里的分页完成图片上的效果，CSS代码怎么写？？求大神帮写下。求代码

Answer 1

新建一个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步，自行修改。

Answer 2

光CSS不行的，要配合js来做。

做法： 一次性把列表内容输出到HTML，然后使用js和css实现显示和隐藏。

代码：

1，下一页显示的开始行，是上一页结束行的上一行
2，每页显示的最后一行，显示出来的字都没显完。只是显示该行字的头一点点，就像把字给砍头了一样。
请大虾们帮着重点关注下我那标注为红色的东西，看下是不是因为那些之间的设置不合理造成的。谢谢了

<SCRIPT language=javascript>
var obj = document.getElementById("frameContent"); //显示内容的层
var pages = document.getElementById("next"); //显示翻页文字的层
var pgindex=1; //当前页
var lastPage = 0 ;

window.onload = function() //窗体加载的事件
{
alert("obj.scrollHeight="+obj.scrollHeight);
var allpages = parseInt(obj.scrollHeight)%500 == 0?parseInt(obj.scrollHeight)/500 :Math.ceil(parseInt(obj.scrollHeight)/500);
var allpages = Math.ceil(parseInt(obj.scrollHeight)/500);//获取页面数量
lastPage = allpages ;
pages.innerHTML += " <a href=\"javascript:showPage(1);\">第一页</a> | "
pages.innerHTML += " <a href=\"javascript:gotopage('-1');\">前一页</a> | <a href=\"javascript:gotopage('1');\">下一页</a> | "
pages.innerHTML += " <a href=\"javascript:showPage("+ lastPage +");\">最后一页</a> | "
pages.innerHTML += " <a href=\"javascript:showPage(document.getElementById('getnum').value)\">跳转到第</a> <input id='getnum' value='' type='text' size='1' />页 | "
pages.innerHTML += " 当前第<span id='now1' value='1' >1页</span> | 总共"+lastPage+"页 | " ;
}
function gotopage(value){
try{
value=="-1"?showPage(pgindex-1):showPage(pgindex+1);
}catch(e){
}
}
function showPage(pageINdex)
{
if( pageINdex <= 1 ){
pageINdex = 1 ;
}else if( pageINdex >= lastPage ){
pageINdex = lastPage ;
}
obj.scrollTop = (500+20)*(pageINdex - 1 ); pgindex = pageINdex;
document.getElementById('now1').innerHTML = pgindex+'页' ;
}
</SCRIPT>

<style type="text/css" >
#frameContent{
overflow:hidden;
width:600px;
line-height:20px;
height:500px;
word-break:break-all;
position:relative;
}
</style>

你试试。

追问

请问是这样用吗？<div class="frameContent" id="frameContent">{$page}</div>

但是效果没有   我自己修改了tp里的原始样式 现在是

这样了

追答

效果没有那当然不对了，为什么要要CSS做呢？你用THinkPHP做项目，也可以用ThinkPHP做分页。
以前我也做过这分页的，可惜项目找不到了。

给你个教程地址吧，当时我也在哪儿看的。
http://www.jb51.net/article/47655.htm

追问

我问的时候就说是用TP做的分页了~~~只是样式不会改