前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >layui 异步数据排序重加载

layui 异步数据排序重加载

作者头像
Laikee
发布2022-04-25 19:08:13
4750
发布2022-04-25 19:08:13
举报
文章被收录于专栏:Laikee Tech SpaceLaikee Tech Space

<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
        }});
  
      });


  });
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-02-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档