layui.table laypage 服务端请求分页 并排序

//分页请求数据
function pagingData(alarmtotal, alarmArray) {
    laypage.render({
       elem: 'tablelaypage'
        , limit: limit
        , limits: [10, 50, 100, 200, 300, 500, 1000]
        , count: alarmtotal
        , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
        , jump: function (obj) {
             //  console.log("first", first);
              offset = (obj.curr - 1) * (obj.limit);//(obj.curr - 1) * (obj.limit); //起始
              limit = obj.limit; //偏移
               //请求接口数据
              if (first) {
                //如果首次请求  只渲染不请求
                first = false;
                alarmTableRender(alarmTotal, alarmArray)
              } else {
                //非首次请求  向服务端请求数据
                getalarmdata(first);
              }
          }
    });
}

 

 //监听表头排序事件 
 table.on('sort(flowstable)', function (obj) {

        getflowdata(obj.field ,obj.type);//从服务端请求数据
    
 });

//从服务端请求到数据后  渲染数据
 function renderTable(data,sortfieldCol,sorttype) {
    table.render({
     elem: '#table'
     , autoSort: false
     , id: 'flowstable'
     , defaultToolbar: ['filter', 'exports', 'print']
     , title: '用户数据表'
     , cols: [[
         { type: 'checkbox', width: 60, LAY_CHECKED: false }
         , { field: 'name', minwidth: 100, title: '主机ID' }
         , { field: 'host', width: 150, title: '主机' }
         , {field: 'upflow', width: 150, sort: true, title: '上行流量(Mb/s)'}
         , {field: 'downflow', width: 150, sort: true, title: '下行流量(Mb/s)'}
         , {field: 'totalflow', width: 150, sort: true, title: '总行流量(Mb/s)'}
         , { fixed: 'right', width: 110, title: '操作', toolbar: '#flowbar', width: 150 }
       ]]
      , page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
         layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 //
           //,curr: 5 //设定初始在第 5 页
            , groups: 1 //只显示 1 个连续页码
            , first: false //不显示首页
            , last: false //不显示尾页
            , limit: 200
            , limits: [10, 50, 100, 200, 500]
         }
       , initSort: {
          field: sortfieldCol  //排序字段,对应 cols 设定的各字段名
          , type: sorttype //排序方式  asc: 升序、desc: 降序、null: 默认排序
       }
       , toolbar: '#operatetoolbar' //开启头部工具栏,并为其绑定左侧模板
       , done: function (res, curr, count) {
             $("[data-field='_id']").css('display', 'none');
        }
       , data: data
 });
}

 

  function getalarmdata(first) {
    //向服务端请求数据  Total 总数据条目 Array 请求到需要渲染的表数据。。。
    //首次刷新页面 first = true;
    if (first) {
       //首次请求到的数据 默认先渲染分页,再渲染数据表
       pagingData(Total, Array);
     }
     else {
       //分页请求渲染数据表
       alarmTableRender(Total, Array)
     }

  }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值