今天来说一说ThinkPHP的AJAX分页实现方法。这里使用了一个jquery.pagination.js的插件。大家可以搜索下该插件,并按照文中html代码部分的文件进行引用。
ThinkPHP的Ajax数据分页
controller中的代码
//jquery.pagination.js插件ajax分页 public function indexAjax(){ $this->display(); } public function loadData($p='0'){ $province=M('Province'); $count=$province->count(); $list=$province->limit($p*10,10)->select(); $this->ajaxReturn(array('total'=>$count,'list'=>$list)); }
html代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ThinkPHP结合jquery.pagination.js分页功能</title> <meta name="viewport" content="width=device-width, province-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="__PUBLIC__/css/pagination.css"> </head> <body> <div id="posts"></div> <div id="Pagination" class="right flickr"></div> <script type="text/javascript" src="__PUBLIC__/js/jquery-1.11.2.min.js"></script> <script src="__PUBLIC__/js/jquery.pagination.js"></script> <script> $(function(){ //此demo通过Ajax加载分页元素 var initPagination = function(total) { // 创建分页 $("#Pagination").pagination(total, { num_edge_entries: 1, //边缘页数 num_display_entries: 3, //主体页数 callback: pageselectCallback, items_per_page: 10, //每页显示1项 prev_text: "前一页", next_text: "后一页" }); }; function pageselectCallback(page_index, jq){ loadData(page_index); } loadData(0); function loadData(p){ $.post("/index.php/Home/Index/loadData",{p:p}) .then(function(data){ var provinces=data.list; var result=''; for(var i=0,len=provinces.length;i<len;i++){ result+="<div style='line-height:30px;'>"+(p*10+i+1)+' '+provinces[i].name+"</div>"; } $('#posts').empty().append(result); if($("#Pagination").html().length == ''){ initPagination(data.total); } }) } }); </script> </body> </html>
运行结果
总结
这里主要还是jquery.pagination.js这个插件的使用,网上关于该插件的文档也很多,大家也可以参考下我这个现成的代码,仿写自己的分页。
评论前必须登录!
注册