Thinkphp ajax分頁

標籤：資源   this   img   page   取數   avg   public   text   類別   

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");        }    }

 

Thinkphp ajax分頁