Thinkphp ajax分页

Posted 2020-08-29 飘逸De精灵

Thinkphp中用ajax分页和普通的ajax分页的区别在于处理位置的不同，thinkphp是在控制器的方法中处理ajax传的值，然后返回数据。下面是一个点击事件触发后，显示的内容用ajax分页。

下面的示例是同一个类别下，根据点击不同的分类显示出点击的分类的数据。

需要修改的地方用黄色背景标示。

1.ajax处理页面

$(".php_list").click(function(){//点击事件，可以根据自己的要求修改。也可以放在$(document).ready(function(e) {})里面自动加载。
        var leibie = "php";//获取的需要处理的参数。
        var fenlei = $(this).html();//获取的需要处理的参数。
        
        $("#fy_n").val("1");//传页数，默认是第1页。
        $(document).ready(function(e) {
            JiaZai();//调用加载方法。
            var zys = 0;
            })
　　　　　　　　//页面加载数据
            function JiaZai()
            {        
                var n = $("#fy_n").val();//页数显示框里面显示的页数
                $.ajax({
                url:"__CONTROLLER__/pagechuli3",//第一个处理页面
                data:{fenlei:fenlei,n:n,leibie:leibie},//要传的参数，n是必须要写的，其它参数根据自己的需求写。
                type:"POST",
                dataType:"JSON",
                success: function(data){
                        var str ="";
                        for(var i in data)//for循环里面是要显示的一条内容，要拼接字符串。
                        {    
                             str =str+ "<div class=‘panel panel-default index_list_wai‘><div class=‘panel-body‘><div class=‘index_list_left‘><div><img src=‘__PUBLIC__/img/img.jpg‘ width=‘40‘ height=‘50‘ /></div><div class=‘index_list_user_nick‘>"+data[i].keyword+"</div></div><div class=‘index_list_right‘><a href=‘#‘><div class=‘index_list_ziyuan_title‘>"+data[i].title+"</div></a><div class=‘index_list_ziyuan_jianjie‘>"+data[i].jianjie+"</div> <div class=‘index_list_ziyuan_di‘><span class=‘index_list_ziyuan_wenben‘>作者："+data[i].faburen+"</span><span class=‘index_list_ziyuan_wenben‘>分数："+data[i].avg+"</span><span class=‘index_list_ziyuan_wenben‘>点击量："+data[i].djnumber+"</span><span class=‘index_list_ziyuan_wenben‘>上传时间："+data[i].time+"</span></div></div></div></div>";
                        }
                        $("#php_list").html(str);//把拼接好的字符串放到指定的地方
                    }
            });
                            
            //获取分页数(列表)
            $.ajax({
                url:"__CONTROLLER__/pagechuli4",//第2个处理页面
                data:{fenlei:fenlei,leibie:leibie},//传的参数。这里是要查询fenlei（分类）和leibie（类别）的数据的数量，把这两个值传过去。
                type:"POST",
                dataType:"TEXT",
                success: function(data){ 
                    //总页数
                    //alert(data);
                    var ys = Math.ceil(data/5); //这里的5是每页要显示的条数，注意和处理页面的显示的数据量一致。
　　　　　　　　　　　　//从这里开始，下面的代码是显示页数的，一般不需要更改，如果需要改变显示的页数的样式，可以修改。
                    zys = ys;                  
                    var s = "<li><a id=‘fy_shang‘>&laquo;</a></li>";
                    var dangqian = $("#fy_n").val(); //当前页数                       
                    for(var i=dangqian-2;i<=dangqian+2;i++)
                    {
                        if(i>0 && i<=ys)
                        {
                            if(dangqian==i)
                            {
                                s+="<li class=‘active‘><a class=‘fy_zhong‘>"+i+"</a></li>";
                            }
                            else
                            {
                                s+="<li><a class=‘fy_zhong‘>"+i+"</a></li>"
                            }
                        }
                    }
                    s += "<li><a id=‘fy_xia‘>&raquo;</a></li>";
                    $("#fy_list").html(s);
                            
                    //给分页列表加事件
                    JiaShiJian();
                }
            })
        　　//给分页列表加事件的方法
        　　function JiaShiJian()
        　　{
        　　　　$("#fy_shang").click(function(){    
        　　　　var n = $("#fy_n").val(); 
        　　　　if(n>1)
        　　　　{
        　　　　　　n--;
        　　　　}
        　　　　else
        　　　　{
        　　　　　　n=1;
        　　　　}
        　　　　　　$("#fy_n").val(n);
        
        　　　　//加载数据
        　　　　JiaZai();
        　　　　})
        　　　　$("#fy_xia").click(function(){
        　　　　var n = $("#fy_n").val(); 
        　　　　if(n<zys)
        　　　　{
        　　　　　　n++;
        　　　　}
        　　　　else
        　　　　{
        　　　　　　n=zys;
        　　　　}
        　　　　$("#fy_n").val(n);
        
        　　　　//加载数据
        　　　　JiaZai();
        　　　　})
        　　　　　　$(".fy_zhong").click(function(){
        　　　　　　var n = $(this).text();
        　　　　　　$("#fy_n").val(n);
        
        　　　　//加载数据
        　　　　JiaZai();
         
        　　　　})
        　　}        
        
        }
    })
</script>

2.Thinkphp处理方法，里面是2个方法。

//点击类别后要显示的内容
    public function pagechuli3()//这个方法的功能是根据ajax传过来的值查询数据，再将查询出来的数据返回到ajax，返回的默认是JSON类型。
    {
        $u = D("zy_list");//造对象，表格名为zy_list。
        $n = $_POST[n];//取到传过来的默认的页数的值。
        $class = $_POST["leibie"];//取传过来的类别的值。
        $fenlei = $_POST["fenlei"];//取传过来的分类的值。
        if($fenlei=="全部资源")//如果分类是全部资源
        {
            $lie = $u->where("class=‘$class‘")->page($n,‘5‘)->select();//查询类别为目标类别的所有数据，调用thinkphp中的page方法，每页显示5条，和ajax里面的5要一致。
            $this->ajaxReturn($lie);//将查询到的数据返回到ajax，注意默认返回的是JSON类型。
        }
        else//下面的只是在查询数据的时候又多加了一个条件。
        {
            $lie = $u->where("class=‘$class‘ and fenlei=‘$fenlei‘")->page($n,‘5‘)->select();
            $this->ajaxReturn($lie);
        }
    }
    
    //点击类别后要显示的页数
    public function pagechuli4()
    {
        $u = D("zy_list");//造对象
        $class = $_POST["leibie"];//获取数据
        $fenlei = $_POST["fenlei"];//获取数据
        if($fenlei=="全部资源")
        {
            $sl = $u->where("class=‘$class‘")->count();//查询类别是目标类别的所有数据的数量
            $this->ajaxReturn($sl,"eval");//数据的数量是数字，返回的数据类型不能再是JSON了，在里面加上eval表示将返回的数据类型更改为TEXT，注意ajax页面接收的也必须是TEXT。
        }
        else//下面的查询数据的数量也只是多增加了一个条件
        {
            $sl = $u->where("class=‘$class‘ and fenlei=‘$fenlei‘")->count();
            $this->ajaxReturn($sl,"eval");
        }
    }