快捷導(dǎo)航

淺談layui框架自帶分頁(yè)和表格重載的接口解析問(wèn)題

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

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

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

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

data 格式例如：

{
 "count": 11,
 "code": 0,
 "msg": "",
 "data": [
 {
  "id": "1",
  "money": 20,
  "toptype": "在線(xiàn)",
  "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í)候注意分頁(yè)后臺(tái)json的參數(shù)名稱(chēng)要與框架保持一致，特別是page（當(dāng)前第幾頁(yè)）和 limit（每頁(yè)顯示條數(shù)），這時(shí)可以通過(guò)框架分頁(yè)屬性來(lái)直接設(shè)置當(dāng)前為第幾頁(yè)和每頁(yè)顯示條數(shù)不用通過(guò)data傳遞這兩個(gè)參數(shù)到后臺(tái)了；如果page不傳的話(huà)會(huì)默認(rèn)為第一頁(yè)；

例如：

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

效果圖如下：

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

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

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

類(lèi)似于：

<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>

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

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

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

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

您可能感興趣的文章: