淺談layui框架自帶分頁和表格重載的接口解析問題

更新時間：2019年09月11日 16:53:07 作者：王王王大膽

今天小編就為大家分享一篇淺談layui框架自帶分頁和表格重載的接口解析問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

首先要了解框架分頁自帶的參數(shù)有哪些，特別是注意參數(shù)名稱要和后臺一致!

**需要注意的是layui框架的數(shù)據(jù)解析格式問題，data必須是個數(shù)組對象的形式才能正常解析否則會很麻煩（親測過非正常解析，手寫js手動動態(tài)添加表格）

data 格式例如：

{
 "count": 11,
 "code": 0,
 "msg": "",
 "data": [
 {
  "id": "1",
  "money": 20,
  "toptype": "在線",
  "operationtype": "充值",
  "remittanceid": 1,
  "img": "",
  "datetime": "2018-08-01 16:01:09",
  "accountid": "wyp666",
  "statusid": "P05",
  "orderid": "2",
  "userid": "wdm123456",
  "audittime": "2018-07-25 16:02:53",
  "tradingid": "",
  "message": "已審核",
  "ip": ""
 }]
 }

這時候注意分頁后臺json的參數(shù)名稱要與框架保持一致，特別是page（當(dāng)前第幾頁）和 limit（每頁顯示條數(shù)），這時可以通過框架分頁屬性來直接設(shè)置當(dāng)前為第幾頁和每頁顯示條數(shù)不用通過data傳遞這兩個參數(shù)到后臺了；如果page不傳的話會默認(rèn)為第一頁；

例如：

 table.render({
   elem: '#detail',
   url : '后臺接口',
   method:'請求方式',
   cellMinWidth : 95,
   page: { //支持傳入 laypage 組件的所有參數(shù)（某些參數(shù)除外，如：jump/elem） - 詳見文檔
   layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定義分頁布局
    //,curr: 5 //設(shè)定初始在第 5 頁
    ,groups: 1 //只顯示 1 個連續(xù)頁碼
    ,first: false //不顯示首頁
    ,last: false //不顯示尾頁
   },
   unresize:false, //禁止拖拽td框，默認(rèn)為false可拖拽
   limits : [10,15,20,25], //這里設(shè)置可選擇每頁顯示條數(shù)
   limit : 10, //這里設(shè)置的是每頁顯示多少條
   id : "表格ID",
   cols : [[..........]]

效果圖如下：

**表格重載（頭部搜索功能）：通過傳入的日期來搜索請求后臺查詢出數(shù)據(jù)

//搜索查詢
  var active = {
   reload: function(){
    var date_s = $('#date_s').val(); //傳入搜索的日期值 
    //執(zhí)行重載
    table.reload('重載表格id', {
     url : '搜索請求接口',
     method:'請求類型',
     page: {
      curr: 1 //重新從第 1 頁開始
     }
     ,where: { //類似于 data
      beginDate:date_s //傳入日期參數(shù)
     }
    });
   }
  };
  $('#rechar_btn').on('click', function(){
   var type = $(this).data('type');
   //不能為空驗證
   if( $('#date_s').val()==""){
    layer.msg('查詢起始日期不能為空');
    return false;
   }
   active[type] ? active[type].call(this) : '';
  });

特別要注意的是執(zhí)行表格重載時，點擊的按鈕btn最好不要用button或者input（容易入坑）否則點擊搜索時頁面會刷新，接口會提交兩次，把 button 換成 div 就會避免這個問題。

類似于：

<button class="layui-btn" data-type="reload" lay-filter="rechar_btn" id="rechar_btn" >搜索</button>

換成 div

<div class="layui-btn" data-type="reload" lay-filter="rechar_btn" id="rechar_btn" >搜索</div>

最后說一下：分頁也支持回調(diào)----看文檔里的-切換分頁的回調(diào)

laypage.render({
 elem: 'test1'
 ,count: 70 //數(shù)據(jù)總數(shù)，從服務(wù)端得到
 ,jump: function(obj, first){
 //obj包含了當(dāng)前分頁的所有參數(shù)，比如：
 console.log(obj.curr); //得到當(dāng)前頁，以便向服務(wù)端請求對應(yīng)頁的數(shù)據(jù)。
 console.log(obj.limit); //得到每頁顯示的條數(shù)
 
 //首次不執(zhí)行
 if(!first){
  //do something
 }
 }
});

都是項目里遇到的一些小問題，順手寫一筆，如果各位大神不巧看到這里還請大家多多提點意見和建議，大家多多溝通和分享~

以上這篇淺談layui框架自帶分頁和表格重載的接口解析問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: