好不容易稍微清闲一点，之前的报销单的程序的录入功能也算是上线了，难得的清闲，不能浪费了时间。今天折腾了一天ThinkPHP的分页代码，总共折腾了3大类的分页功能。1.ThinkPHP自带的分页类的分页使用。2.ThinkPHP结合jquery.pagination.js插件实现Ajax无刷新分页。3.ThinkPHP结合jquery.ias.js插件实现无限滚动分页。今天先对ThinkPHP自带的分页功能做下笔记吧。
ThinkPHP数据分页
controller中的代码
//ThinkPHP自带的分页功能
public function index(){
$province=M('Province');
$count=$province->count();
$page=new \Think\Page($count,5);
$page->setConfig('first','首页');
$page->setConfig('prev','上一页');
$page->setConfig('next','下一页');
$page->setConfig('end','尾页');
$page->setConfig('theme', '%HEADER% 共%TOTAL_PAGE%页 %FIRST% %UP_PAGE% %LINK_PAGE% %DOWN_PAGE% %END%');
$show=$page->show();
//$list=$province->limit($page->firstRow.','.$page->listRows)->select();
$list=$province->page($_GET['p'],$page->listRows)->select();
$this->assign('province',$list);
$this->assign('page',$show);
$this->display();
}
html模板中的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ThinkPHP分页功能</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="__PUBLIC__/css/tp_pagination.css">
</head>
<body>
<div id="posts">
<foreach name="province" item="u">
<div style="line-height:30px; font-size:20px;">
<span><{$u.provinceid}></span>
<span><{$u.name}></span>
</div>
</foreach>
</div>
<div class="flickr"><{$page}><div/>
</body>
</html>
执行结果
ThinkPHP数据分页类的样式
可以看到上图的结果，分页的div加入了一些css样式，让原来丑陋的样式也变得赏心悦目起来。这里提供几种不同样式的css代码，只需要将<div class="flickr"><{$page}></div>中的class属性修改为css代码中不同的class名称就可以变换效果。
/*css digg style pagination*/
div.digg {
padding: 3px;
margin: 3px;
text-align: center
}
div.digg a {
border: #aaaadd 1px solid;
padding: 2px 5px;
margin: 2px;
color: #000099;
text-decoration: none
}
div.digg a:hover {
border: #000099 1px solid;
color: #000;
}
div.digg a:active {
border: #000099 1px solid;
color: #000;
}
div.digg span.current {
border: solid 1px #000099;
padding: 2px 5px;
font-weight: bold;
margin: 2px;
color: #fff;
background-color: #000099;
}
div.digg span.disabled {
border: #eee 1px solid;
padding: 2px 5px;
margin: 2px;
color: #ddd;
}
/*css yahoo style pagination*/
div.yahoo {
margin: 3px;
padding: 3px;
text-align: center
}
div.yahoo a {
border: #fff 1px solid;
padding: 2px 5px;
margin: 2px;
color: #000099;
text-decoration: underline;
}
div.yahoo a:hover {
border: #000099 1px solid;
color: #000;
}
div.yahoo a:active {
border: #000099 1px solid;
color: #f00;
}
div.yahoo span.current {
border: #fff 1px solid;
padding: 2px 5px;
font-weight: bold;
margin: 2px;
color: #000;
background-color: #fff;
}
div.yahoo span.disabled {
border: #eee 1px solid;
padding: 2px 5px;
margin: 2px;
color: #ddd;
}
/*css meneame style pagination*/
div.meneame {
padding: 3px;
font-size: 80%;
margin: 3px;
color: #ff6500;
text-align: center;
}
div.meneame a {
border: #ff9600 1px solid;
padding: 5px 7px;
background-position: 50% bottom;
background-image: url(../images/meneame.jpg);
margin: 0 3px 0 0;
text-decoration: none;
}
div.meneame a:hover {
border: #ff9600 1px solid;
background-image: none;
color: #ff6500;
background-color: #ffc794;
}
div.meneame a:active {
border: #ff9600 1px solid;
background-image: none;
color: #ff6500;
background-color: #ffc794;
}
div.meneame span.current {
border: #ff6500 1px solid;
padding: 5px 7px;
font-weight: bold;
color: #ff6500;
margin: 0 3px 0 0;
background-color: #ffbe94;
}
div.meneame span.disabled {
border: #ffe3c6 1px solid;
padding: 5px 7px;
color: #ffe3c6;
margin: 0 3px 0 0;
}
/*css flickr style pagination*/
div.flickr {
padding: 3px;
margin: 3px;
text-align: center;
}
div.flickr a {
border: #dedfde 1px solid;
padding: 2px 6px;
background-position: 50% bottom;
color: #0061de;
margin: 0 3px 0 0;
text-decoration: none;
}
div.flickr a:hover {
border: #000 1px solid;
background-image: none;
color: #fff;
background-color: #0061de;
}
div.meneame a:active {
border: #000 1px solid;
background-image: none;
color: #fff;
background-color: #0061de
}
div.flickr span.current {
padding: 2px 6px;
font-weight: bold;
color: #ff0084;
margin: 0 3px 0 0;
}
div.flickr span.disabled {
padding: 2px 6px;
color: #adaaad;
margin: 0 3px 0 0;
}
/*css sabrosus style pagination*/
div.sabrosus {
padding: 3px;
margin: 3px;
text-align: center;
}
div.sabrosus a {
border: #9aafe5 1px solid;
padding: 2px 5px;
margin: 0 2px 0 0;
text-decoration: none;
}
div.sabrosus a:hover {
border: #2b66a5 1px solid;
color: #000;
background-color: lightyellow;
}
div.pagination a:active {
border: #2b66a5 1px solid;
color: #000;
background-color: lightyellow;
}
div.sabrosus span.current {
border: navy 1px solid;
padding: 2px 5px;
font-weight: bold;
color: #fff;
margin: 0 2px 0 0;
background-color: #2e6ab1
}
div.sabrosus span.disabled {
border: #929292 1px solid;
padding: 2px 5px;
margin: 0 2px 0 0;
}
/*css scott style pagination*/
div.scott {
padding: 3px;
margin: 3px;
text-align: center;
}
div.scott a {
border: #ddd 1px solid;
padding: 2px 5px;
color: #88af3f;
margin: 0 2px 0 0;
text-decoration: none;
}
div.scott a:hover {
border: #85bd1e 1px solid;
color: #638425;
background-color: #f1ffd6;
}
div.scott a:active {
border: #85bd1e 1px solid;
color: #638425;
background-color: #f1ffd6;
}
div.scott span.current {
border: #b2e05d 1px solid;
padding: 2px 5px;
font-weight: bold;
color: #fff;
margin: 0 2px 0 0;
background-color: #b2e05d;
}
div.scott span.disabled {
border: #f3f3f3 1px solid;
padding: 2px 5px;
color: #ccc;
margin: 0 2px 0 0;
}
/*css quotes style pagination*/
div.quotes {
padding: 3px;
margin: 3px;
text-align: center;
}
div.quotes a {
border: #ddd 1px solid;
padding: 2px 5px;
color: #aaa;
margin: 0 2px 0 0;
}
div.quotes a:hover {
border: #a0a0a0 1px solid;
padding: 2px 5px;
margin: 0 2px 0 0;
}
div.quotes a:active {
border: #a0a0a0 1px solid;
padding: 2px 5px;
margin: 0 2px 0 0;
}
div.quotes span.current {
border: #e0e0e0 1px solid;
padding: 2px 5px;
font-weight: bold;
color: #aaa;
margin: 0 2px 0 0;
background-color: #f0f0f0;
}
div.quotes span.disabled {
border: #f3f3f3 1px solid;
padding: 2px 5px;
color: #ccc;
margin: 0 2px 0 0;
}
到此一游!
I am sure this piece of writing has touched all the internet visitors, its really really nice article on building up new weblog.|