thinkPHP5使用laypage分頁外掛程式實現列表分頁功能_php執行個體

這篇文章主要為大家詳細介紹了 thinkPHP5使用laypage分頁外掛程式實現列表分頁功能，具有一定的參考價值，對 thinkPHP5感興趣的小夥伴們可以參考一下，一起來看看關於 thinkPHP5的laypage分頁吧

一、背景

在使用thinkPHP架構做項目的時候，經常會遇到對列表的內容進行分頁。thinkPHP架構中內建了分頁功能，但是有缺陷。這個缺陷是每次返回每頁資料給頁面時需要重新載入頁面所需要的JS、CSS等資源。如果頁麵包含的JS過多、過大，會增加流量壓力。因此，我們使用laypage外掛程式。每次使用ajax請求擷取每頁的資料就可以了，不需要重複載入頁面。

二、分頁流程

如所示：

流程說明：

1) 調研App.php中的函數，該函數調用fetch函數。fetch函數渲染list.html.
2) list.html 調用擷取總頁數的函數，並得到總頁數。
3) 擷取第一頁資料。
4)初始化laypage分頁外掛程式。
5)點擊頁碼，觸發分頁查詢。

三、實現分頁功能相關的代碼

1、App.php Controller的代碼

//fetch渲染頁面 public function index() {  return $this->fetch('list'); }     //根據頁面傳入的頁碼查詢資料  public function getPage()  {       <span style="color:#FF0000;">// 擷取頁面傳入的頁碼 </span>         $nowpage = input("page");    //每頁顯示10條資料    $limits = 10;     $app = new appInfo();    $page_info = $app->limit(($nowpage * $limits), $limits)->select();     // ajax 分頁輸出    $info = ['pageinfo'=>$page_info,'nowpage'=>$nowpage,'nowpage'=>$nowpage];    return json($info);    }    //擷取所有頁數 public function getAllPage(){   try{   $count = appInfo::count();    $limits = 10;   // 計算總頁面   $allpage = ceil($count / $limits);    $info =['allpage'=>$allpage];  }catch (\Exception $e){   abort(500,$e->getMessage(),['result'=>TopsecGWErrer::TOPSEC_GW_ERR_NO_UNKNOWN]);  }   return json($info); }

2、list.html中的html代碼

<p class="box-body">   <table id="table1" class="table table-bordered table-striped">    <thead>    <tr>     <th>應用程式名稱</th>     <th>應用類型</th>     <th>應用映像</th>     <th>建立日期</th>     <th>修改日期</th>     <th>操作</th>    </tr>    </thead>    <tbody id="table_body"></tbody>    <tfoot>     </tfoot>   </table>   <p id="result"></p>   <p class=" ">    <button id="add_app" type="button" class="btn btn-primary col-xs-offset-5" >     <span class='fa fa-tasks white'></span>丨添加應用    </button>   </p>   <p id="content"> </p>   <p class="box-body">     <button id="add_img" type="button" class="btn btn-primary col-xs-offset-5" >     <span class='fa fa-tasks white'></span>丨添加圖片    </button>   </p>    <!-- /.box-body -->  </p>

3、list.html中的jQuery代碼

//pageCount：總頁數。用於初始化laypage分頁控制項。 //pageIndex：初始化當前頁。顯示第一頁。 //currentPage：當前頁數。 //getPageData:擷取每頁資料的函數。 //url:擷取每頁資料的方法的路徑。由控制器和函數名組成。  function jsonPage(pageCount, pageIndex,currentPage, getPageData,url) {   var laypageindex = laypage({    cont: 'result', //容器。值支援id名、原生dom對象，jquery對象。    skin: '#3c8dbc',    pages: pageCount, //通過後台拿到的總頁數    curr: pageIndex, //初始化當前頁    prev: '上一頁', //若不顯示，設定false即可    next: '下一頁', //若不顯示，設定false即可    skip: true, //是否開啟跳頁    jump: function (obj, first) { //觸發分頁後的回調     //getPageData(1);     if (!first) { //點擊跳頁觸發函數自身，並傳遞當前頁：obj.curr      getPageData(url,obj.curr);      currentPage = obj.curr;     }    }   });  }   /url:擷取總頁資料的方法的路徑。由控制器和函數名組成。   function getAllpage(url){    var tmp ;   $.ajax({    type: "GET",    dataType: "json",    async: false,    url: PUBLIC_BASE+url,    success: function(json) {     var data = eval(json);     tmp=data.allpage;    },    error: function(json) {     }    });   return tmp;   }   //data:每頁的資料。由JSON對象組成。  function instantiation(data) {   //begin $.each   $.each(data.pageinfo, function (index, item) {    $("#table_body").append($('<tr class="table_tr"/>')     .append($("<td/>").html(item.name))     .append($("<td/>").html(item.desc))     .append($("<td/>").html("<img src='"+item.appImg+"' />"))     .append($("<td/>").html(item.create_time))     .append($("<td/>").html(item.update_time))     .append(      $("<td />")       .append($("<a class='yellow' id='view"+item.id+"'><i class='fa fa-eye fa-fw'></i>查看丨 </a>"))       .append($("<a class='green' id='edit"+item.id+"'><i class='fa fa-edit fa-fw'></i>編輯丨 </a>"))       .append($("<a class='red' id='delete"+item.id+"'><i class='fa fa-remove fa-fw'></i>刪除丨 </a>"))       .append($("<a class='blue' id='forbid" + item.id + "'><i class='fa fa-ban fa-fw'></i>禁用</a>"))      )     );     $("#view"+item.id).click(function() {     fillMainContent("/application/application?model=view&id="+item.id);    })     $("#edit"+item.id).click(function() {     fillMainContent("/application/application?model=edit&id="+item.id);    })     $("#delete"+item.id).click(function() {      deleteApp(item.id);     alert("刪除成功");     })     $("#forbid"+item.id).click(function() {     deleteApp(item.id);     alert("刪除成功");     getPageData(currentPage);    })    });   //end $.each     }   //擷取每頁的資料。curr:頁碼 ，curl:擷取資料的路徑。  function getPageData(url,curr) {   curr = curr-1;   $.ajax({     type: "GET",    dataType: "json",    data: {page:curr},    url: PUBLIC_BASE+url,    success: function(json) {     $('#table_body').empty();     var data = eval(json);     console.log(data);      instantiation(data);    },     error: function(json) {      var data = eval(json);     console.log(data);     }    });   }   <span style="color:#FF0000;">//調用函數實現分頁</span> //擷取總頁數，用於初始化分頁控制項總頁數  pageCount= getAllpage("/application/getAllPage");  //擷取第一頁資料  getPageData("/application/getpage",1);  //初始化分頁控制項並分頁  jsonPage(pageCount,pageIndex,currentPage,getPageData,"/application/getpage");

四、參考資源

http://laypage.layui.com/