layui 异步数据排序重加载

2022-04-25 19:08:13 浏览数 (3)

<table class="layui-table" id="userList-table" lay-filter="userList-table"></table>

代码语言:javascript复制
layui.use(['form', 'table', 'util', 'config', 'admin'], function () {
      var form = layui.form;
      var table = layui.table;
      var config = layui.config;
      var layer = layui.layer;
      var util = layui.util;
      var admin = layui.admin;
      var  access_token=config.getToken().access_token;

      // 渲染表格
      table.render({
          id:'userList-table',
          elem: '#userList-table',
          url: config.base_server   'gameend/userList',
          method: 'GET',
          where: {
              access_token: access_token
          },
          page: true,
          limit: 100,
          cols: [[
              {type: 'numbers'},
              {field: 'username', title: '用户名'},
              {field: 'nickname', sort: false, title: '昵称'},
              {field: 'points', sort: true, title: '积分'},
              {field: 'drawnum', sort: false, title: '抽奖次数'},
              {field: 'invitenum', sort: true, title: '邀请好友数'},
              {field: 'ip', sort: false, title: 'ip注册地'},
              {field: 'createtime', sort: false, title: '注册时间'},
              {field: 'status', sort: false, templet: '#userList-tpl-state', title: '状态'},
              {align: 'center', toolbar: '#userList-table-bar', title: '操作'},
              {align: 'center', toolbar: '#userInfo-table-bar', title: '查看详情'},
          ]],
          done: function(res, page, count){
              //如果是异步请求数据方式,res即为你接口返回的信息。
              //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度

              $("[data-field='points']").each(function(){  
                  $(this).addClass("points");
              });
              $("[data-field='drawnum']").each(function(){
                  $(this).addClass("drawnum");
              });
              $("[data-field='10']").each(function(){
                  $(this).addClass("ckxq");
              })


          }
      });


      var type="";
      table.on('sort(userList-table)', function(obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
          // console.log(obj.field); //当前排序的字段名
          //console.log(obj.type); //当前排序类型:desc(降序)、asc(升序)、null(空对象,默认排序)
          //console.log(this); //当前排序的 th 对象

          //type 0 积分降序 1积分升序 2邀请数降序 3邀请数升序
          //
          if(obj.field=="points"){ //积分排序
              if(obj.type=="desc"){ //降序 type=0
                  type=0;
              }else if(obj.type=="asc"){ //升序 type=1
                  type=1;
              }else if(obj.type==null){
                  type="";
              }
          }

          if(obj.field=="invitenum"){ //积分排序
              if(obj.type=="desc"){ //降序 type=0
                  type=2;
              }else if(obj.type=="asc"){ //升序 type=1
                  type=3;
              }else if(obj.type==null){
                  type="";
              }
          }

          //console.log(type);
      table.reload('userList-table', {
          initSort: obj, //记录初始排序,如果不设的话,将无法标记表头的排序状态。 layui 2.1.1 新增参数
          where: {
               access_token: access_token,
                type:type
        }});
  
      });


  });

1 人点赞