layui table样式_layui table 分页

layui table样式_layui table 分页table的结构:       序号   登录账号   用户名   权限   操作          ${(user.id)!”}   ${(user.userAccount!”)}   ${(user.userName!”)}   ${(user.

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

table的结构:

<table lay-filter=”userlist-table” style=”display: none;”> 

  <thead>

    <tr>

      <th lay-data=”{field:’a’, width:200}”>序号</th>

      <th lay-data=”{field:’b’, width:150}”>登录账号</th>

      <th lay-data=”{field:’c’, minWidth: 180}”>用户名</th>

      <th lay-data=”{field:’d’, minWidth: 180}”>权限</th>

      <th lay-data=”{field:’e’, minWidth: 180}”>操作</th>

    </tr> 

  </thead>

  <tbody>

    <#if baseUserPageModel?? && baseUserPageModel.data??>


<#list baseUserPageModel.data as user>


<tr>

     
<td>${(user.id)!”}</td>

     
<td>${(user.userAccount!”)}</td>

     
<td>${(user.userName!”)}</td>

     
<td>${(user.roleName!”)}</td>

     
<td> 

     
<a class=”layui-btn layui-btn-xs” class=”edit” οnclick=’editUser(${user.id})’ >编辑</a> 

     
<a class=”layui-btn layui-btn-danger layui-btn-xs” class=”del” οnclick=’deleteUser(${user.id})’ >删除</a>

     
</td>

   
</tr>


</#list>


</#if>

  </tbody>

</table>

使用layui渲染table

layui.use([‘common’,’table’,’jquery’], function(){

  var common = layui.common;
  var table = layui.table;
  var $=layui.$;
   
   var data={

   table :{

id:’userlist-table’,
options:{  
}
},
page :{ 
id:”page”,
fromId:”searchFrom”,
options:{ 
layout: [‘count’, ‘prev’, ‘page’, ‘next’, ‘limit’, ‘skip’],
first: ‘首页’,
last: ‘尾页’
}
}
   };
   common.filltable(data);
});

common是自己封装的form table page一体的js插件。

如果想修改某个表格的单元格高度或者修改一些样式,可以在回调函数done里设置。

 table :{

id:’userlist-table’,
options:{  

  1. done: function(res, curr, count){
  2. //如果是异步请求数据方式,res即为你接口返回的信息。
  3. //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
  4. console.log(res);
  5. //得到当前页码
  6. console.log(curr);
  7. //得到数据总量
  8. console.log(count);
  9. }

}


}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/192849.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号