快捷導(dǎo)航

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

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

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

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

**需要注意的是layui框架的數(shù)據(jù)解析格式問題，data必須是個(gè)數(shù)組對(duì)象的形式才能正常解析否則會(huì)很麻煩（親測過非正常解析，手寫js手動(dòng)動(dòng)態(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": ""
 }]
 }

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

例如：

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

效果圖如下：

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

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

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

類似于：

<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ù)端請(qǐng)求對(duì)應(yīng)頁的數(shù)據(jù)。
 console.log(obj.limit); //得到每頁顯示的條數(shù)
 
 //首次不執(zhí)行
 if(!first){
  //do something
 }
 }
});

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

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

您可能感興趣的文章: