好不容易稍微清闲一点,之前的报销单的程序的录入功能也算是上线了,难得的清闲,不能浪费了时间。今天折腾了一天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.|