layUI-数据表格

挺棒的，这是官网文档：

https://www.layui.com/doc/modules/table.html#methodRender

这是我自己用的效果：

HTML：

<div th:include="/common/header :: html"></div>
<div class="layui-body">
	<!-- 内容主体区域 -->
	<div style="padding: 15px;margin-top:60px;">
		<table id="user_table"></table>
	</div>
</div>

JS：

layui.use('table', function(){
  var table = layui.table;
  //第一个实例
  table.render({
    elem: '#user_table',
    title:'用户信息表',//table 的大标题（在文件导出等地方会用到）
//    width:1000,//table容器的默认宽度是跟随它的父元素铺满
    height: 450,
    url: '',//数据接口
    data:[
    	{
    		id:1,username:'小明'
    	},
    	{
    		id:2,username:'小红'
    	},
    	{
    		id:3,username:'小苍'
    	},
    	{
    		id:4,username:'小泽'
    	},
    	{
    		id:5,username:'小空'
    	},
    	{
    		id:6,username:'小丽'
    	},
    	{
    		id:7,username:'小王'
    	},
    	{
    		id:8,username:'小柏'
    	},
    	{
    		id:9,username:'阿娇'
    	},
    	{
    		id:10,username:'小岩'
    	},
    	{
    		id:11,username:'小苍'
    	},
    	{
    		id:12,username:'小泽'
    	},
    	{
    		id:13,username:'小苍'
    	},
    	{
    		id:14,username:'小泽'
    	}
    ],
    page: true, //开启分页,支持 laypage的参数哦
    limit:10,//每页显示的条数（默认：10）
    limits:[10,20,30,40,50,60,70,80,90],//每页条数的选择项
    loading:true,//url时，进度条显示
    totalRow:false,//合计行
    toolbar:true,//若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数
    defaultToolbar:['filter', 'print', 'exports'],//['filter', 'print', 'exports']
    cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},
      {field: 'username', title: '用户名', width:80}
    ]],
    text: {
    	//自定义一些文本提示
        none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
    },
    initSort: {
        field: 'id', //排序字段，对应 cols 设定的各字段名
        type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
    },
    skin: 'line', //行边框风格:line （行边框风格） row （列边框风格） nob （无边框风格）
    even: true, //开启隔行背景:true/false
    size: 'sm',//设定表格尺寸:sm （小尺寸） lg （大尺寸）
    done:function(res, curr, count){
    	//相应、当前页码、数据总量
    	//如果是异步请求数据方式，res即为你接口返回的信息。
        //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
    	console.log(res+":"+curr+":"+count);
    }
  });
});

 

col：

cols: [[ //表头
    	{field: '', title: '选择', width:80,type:'checkbox',},
		{
			field: 'id', 
			title: 'ID', 
			width: 80,
			sort:  true,
//			type:  'checkbox',//复选框
//			LAY_CHECKED: true,//是否全选
//			fixed: 'left',//固定列
			hide:false,//隐藏
			totalRow:false,//合计本列
			totalRowText:'总共：',//合计文本
			unresize:true,//是否禁用拖拽列宽
			event:'',//绑定事件
//			style：'background-color: #5FB878; color: #fff;',//自定义单元格样式
			align:'center',
//			colspan:3,
//			rowspan:2,
//			templet:'#templetname',//自定义模板，比如格式化日期，看文档去
//			toolbar:'default'//就是他，自定义操作的
		},

<!-- 定义模板 -->
<script type="text/html" id="user_table_template">
  <a href="/user/addOrEdit?id={{d.id}}" class="layui-table-link">编辑</a>
  <a href="/user/deleteUser?id={{d.id}}" class="layui-table-link">删除</a>
</script>