layui的table模块用于对表格进行一些列功能和动态化数据操作,易上手操作,本篇介绍table常用的方法,更多的细节可参考官方文档:layui数据表格文档
一、引入layui文件
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
<script src="/layui/layui.js"></script>
二、快速使用
创建一个table实例最简单的方式是,在页面放置一个元素
<table id="demo"></table>
然后通过 table.render() 方法指定该容器
layui.use('table', function(){
var table = layui.table;
//执行渲染
table.render({
elem: '#demo' //指定原始表格元素选择器(推荐id选择器)
,url: '/demo/table/user/' //数据接口
,page: true //开启分页
,cols: [[ //表头
{
field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{
field: 'username', title: '用户名', width:80}
,{
field: 'sex', title: '性别', width:80, sort: true}
,{
field: 'city', title: '城市', width:80}
,{
field: 'sign', title: '签名', width: 177}
,{
field: 'experience', title: '积分', width: 80, sort: true