[ThinkPHP]结合jquery.pagination.js实现AJAX分页

今天来说一说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>

运行结果

ThinkPHP ajax分页示例代码

总结

这里主要还是jquery.pagination.js这个插件的使用,网上关于该插件的文档也很多,大家也可以参考下我这个现成的代码,仿写自己的分页。

分享到:更多 ()

抢沙发

评论前必须登录!