今天来说一说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这个插件的使用，网上关于该插件的文档也很多，大家也可以参考下我这个现成的代码，仿写自己的分页。
评论前必须登录！
注册