author：咔咔

wechat：fangkangfk

看了很多分頁功能都實現不了，要麼就是看不明白，遇到不會的先使用之前方案實現，慢慢的就會有思路，然後成功

案例：

一個注意點就是html放置的位置

這裡我將整段程式碼都複製出來，如何你只想實現功能，只需要將html拼接的資料換成你的，然後請求介面換成自己的即可

<script type="text/javascript">
    window.onload= function () {
        loadData()  //請求資料
        getPage()     //分頁操作
    }
    var page=1; //設定首頁頁碼
    var limit=1;  //設定一頁顯示的條數
    var total;    //總條數
    function loadData(){
        $.ajax({
            type:"post",
            url:"{url(Banner/index)}",//對應controller的URL
            async:false,
            dataType: 'json',
            data:{
                "page_index":page,
                "page_size":limit,
            },
            success:function(ret){
                total=ret.total;
                var data1=ret.data;
                var html= '';
                for(var i=0;i<data1.length;i++){
                    html+='<tr>';
                    html+='<td>'+ data1[i].b_id +'</td>';
                    html+='<td>'+ data1[i]['banner_type']['vt_name'] +'</td>';
                    html+='<td>'+ data1[i]['banner_vs_video_name']['vi_title'] +'</td>';
                    html+='<td>'+ data1[i]['b_thumbnailUrl'] +'</td>';
                    html+='<td>'+ data1[i]['b_linkUrl'] +'</td>';
                    html+='<td>'+ data1[i]['b_sort'] +'</td>';
                    html+='<td>'+ data1[i]['b_showType'] +'</td>';
                    html+='<td>'+ data1[i]['b_targetType'] +'</td>';
                    html+='<td>'+ data1[i]['b_title'] +'</td>';
                    html+='<td>'+ data1[i]['b_slaveTitle'] +'</td>';
                    html+='<td>'+ data1[i]['b_linkUrlList']+'</td>';
                    html+='</tr>';
                }
                $("#tab_list").html(html);
            }
        });
    }


    function getPage(){
        layui.use('laypage', function(){
            var laypage = layui.laypage;
            laypage.render({
                elem: 'pages'
                ,count: 3 //資料總數，從服務端得到
                ,limit:1
                ,jump: function(obj, first){
                    page=obj.curr;  //改變當前頁碼
                    limit=obj.limit;
                    loadData()
                }
            });
        });
    }

</script>
 

後臺資料：

控制器程式碼：

server層程式碼

server層基類程式碼，處理分頁

<?php

namespace app\data\server;


class BaseServer
{
    /**
     * 對於分頁資料返回處理
     *
     * $param array $info  需要 處理的資料
     * $param int $count  總的資料量
     * $param int $page_size  每頁顯示的條數
     * @return array
     */
    public function setReturnList($info, $count, $page_size)
    {
        if($page_size == 0){
            // 總頁數
            $page_count = 1;
        }else{
            if($count % $page_size == 0){
                $page_count = $count / $page_size;
            }else{
                $page_count = (int)($count / $page_size);
            }
        }

        return [
            // 角色資料
            'data' => $info,
            // 角色總的資料
            'total_count' => $count,
            // 共幾頁
            'page_count' => $page_count
        ];
    }
}
 

如果你只想實現功能的話，使用上邊的程式碼十來分鐘就實現了，下來我就要開始分析原理了

首先就是前端js程式碼了，需要做的第一件事就是組裝資料

這裡是html原始碼

我們都知道分頁做ajax的使用者體驗很好，所以我們需要組裝資料

 這裡的程式碼就不需要解釋了，註釋寫的特別清晰了

<script type="text/javascript">
    window.onload= function () {
        loadData()  //請求資料
        getPage()     //分頁操作
    }
    var page=1; //設定首頁頁碼
    var limit=1;  //設定一頁顯示的條數
    var total;    //總條數
    function loadData(){
        $.ajax({
            type:"post",
            url:"{url(Banner/index)}",//對應controller的URL
            async:false,
            dataType: 'json',
            data:{
                "page_index":page,
                "page_size":limit,
            },
            success:function(ret){
                total=ret.total;
                var data1=ret.data;
                var html= '';
                for(var i=0;i<data1.length;i++){
                    html+='<tr>';
                    html+='<td>'+ data1[i].b_id +'</td>';
                    html+='<td>'+ data1[i]['banner_type']['vt_name'] +'</td>';
                    html+='<td>'+ data1[i]['banner_vs_video_name']['vi_title'] +'</td>';
                    html+='<td>'+ data1[i]['b_thumbnailUrl'] +'</td>';
                    html+='<td>'+ data1[i]['b_linkUrl'] +'</td>';
                    html+='<td>'+ data1[i]['b_sort'] +'</td>';
                    html+='<td>'+ data1[i]['b_showType'] +'</td>';
                    html+='<td>'+ data1[i]['b_targetType'] +'</td>';
                    html+='<td>'+ data1[i]['b_title'] +'</td>';
                    html+='<td>'+ data1[i]['b_slaveTitle'] +'</td>';
                    html+='<td>'+ data1[i]['b_linkUrlList']+'</td>';
                    html+='</tr>';
                }
                $("#tab_list").html(html);
            }
        });
    }


    function getPage(){
        layui.use('laypage', function(){
            var laypage = layui.laypage;
            laypage.render({
                elem: 'pages'
                ,count: 3 //資料總數，從服務端得到
                ,limit:1
                ,jump: function(obj, first){
                    page=obj.curr;  //改變當前頁碼
                    limit=obj.limit;
                    loadData()
                }
            });
        });
    }

</script>
 

這個時候就會有一個問題，我們組裝的資料放在那，這個時候就需要將原來的資料全部刪除掉，所有的資料都使用拼接的資料

直到這裡前端的程式碼就結束了，下來開始後端程式碼

我們在js裡邊可以看出，ajax像後端發起請求的時候帶了倆個引數，一個是頁數，一個是頁面顯示資料

控制器程式碼

在控制器裡邊需要獲取這倆個引數，並且傳遞給bannerServer層處理資料

 在bannerServer裡邊需要查詢banner列表的資料，資料查詢是在模型裡邊操作的，所以還需要去一趟banner模型那裡一趟

在bannerModel 裡邊獲取列表的所有資料，這裡邊有一個關聯預載入，這個是根據你們的業務來寫的，如果沒有其他業務直接獲取全部然後page()->select()即可，model層資料處理完之後返回給bannerServer層

又回到bannerServer層

這一次獲取了資料的總數

將資料，總數，每頁查詢的條數傳遞給baseServer層處理

到了baseServer

這一層主要是對引數做了個判斷，當前端發生異常，後端沒有正常接收到引數時，給預設引數

最後所有的資料都會返回給控制器

這也就是ajax請求到的資料