《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：
1.23.3 基础参数一览表
基础参数并非所有都要出现，有必选也有可选，结合实际需求自由设置即可。基础参数一般出现在以下三种场景中。
（1）场景一是在方法渲染中使用，如图1-xx所示。
（2）场景二是在自动渲染中使用，如图1-xx所示。
（3）场景三是在重加载reload中使用，如图1-xx所示。
图1-xx所示是目前table模块所支持的全部参数一览表，并对重点参数进行了详细说明。
1.23.3.1 toolbar参数
值类型：String/DOM/Boolean。
开启表格头部工具栏区域，该参数支持四种类型值：
（1）toolbar:'#toolbarDemo' //指向自定义工具栏模板选择器
（2）toolbar: '<div>xxx</div>' //直接传入工具栏模板html代码
（3）toolbar: true //仅开启工具栏，不显示左侧模板，若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数
（4）toolbar: 'default' //让工具栏左侧显示默认的内置模板
1.23.3.1.1 toolbar: '#toolbarDemo'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<div id="toolbarDemo" style="display: none;">
<a href='#'>增加1</a>
<a href='#'>备份1</a>
</div>
<table id="demo" lay-filter="test"></table>
<script src="layui/layui.all.js"></script>
<script>
layui.use('table', function() {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
toolbar: "#toolbarDemo",
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '用户名',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.1.2 toolbar: '<div>xxx</div>'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="layui/layui.all.js"></script>
<script>
layui.use('table', function() {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
toolbar: '<div style="display: none;"><a href="#">增加2</a> <a href="#">备份2</a></div>',
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '用户名',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.1.3 toolbar: true
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="layui/layui.all.js"></script>
<script>
layui.use('table', function() {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
toolbar: true,
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '用户名',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.1.4 toolbar: 'default'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="layui/layui.all.js"></script>
<script>
layui.use('table', function() {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
toolbar: 'default',
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '用户名',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.2 defaultToolbar
defaultToolbar值类型Array，默认值：["filter","exports","print"]。该参数可自由配置头部工具栏右侧的图标按钮。
Array数组支持以下可选值：
（1）filter: 显示筛选图标
（2）exports: 显示导出图标
（3）print: 显示打印图标
可根据值的顺序显示排版图标，如：
defaultToolbar: ['filter', 'print', 'exports']
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
layui.use('table', function() {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
toolbar: true,
defaultToolbar: ["exports", "print"],
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '用户名',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.3 width
width值类型Number，作用设定容器宽度。table容器的默认宽度是跟随它的父元素同宽，也可以设定一个固定值，当容器中的内容超出了该宽度时，会自动出现横向滚动条。
1.23.3.3.1 不添写
宽度自适应的测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
layui.use('table', function() {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '用户名',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
});
</script>
</body>
</html>
运行效果如图1-xx所示。
表格的宽度和浏览器宽度一样。
1.23.3.3.2 固定值
指定宽度的测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
layui.use('table', function() {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
width: 800,
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '用户名',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.3.3 出现水平滚动条
出现水平滚动条的测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
layui.use('table', function() {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
width: 400,
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '用户名',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.4 height
height值类型Number/String，设定容器高度。
可选值如图1-xx所示。
1.23.3.4.1 不添写
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
layui.use('table', function() {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '用户名',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.4.2 固定值
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
layui.use('table', function() {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
height: 500,
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '用户名',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
});
</script>
</body>
</html>
运行效果如图1-xx所示。
出现垂直滚动条的测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
layui.use('table', function() {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
height: 150,
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '用户名',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.4.3 full-差值
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
layui.use('table', function() {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
height: "full-100",
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '用户名',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.5 cellMinWidth
cellMinWidth值类型Number。全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况，其优先级低于表头参数中的minWidth。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
layui.use('table', function() {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
cellMinWidth: 400,
cols: [
[ //表头
{
field: 'id',
title: 'ID',
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '用户名',
}, {
field: 'password',
title: '账号',
sort: true
}
]
]
});
});
</script>
</body>
</html>
浏览器宽度较大的运行效果如图1-xx所示。
浏览器宽度较小的运行效果如图1-xx所示。
1.23.3.6 done
done值类型Function。无论是异步请求数据，还是直接赋值数据，都会触发该回调。可以利用该回调做一些表格以外元素的渲染。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
layui.use('table', function() {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
done: function(res, curr, count) {
alert("res=" + res + " curr=" + curr + " count=" + count);
},
cols: [
[ //表头
{
field: 'id',
title: 'ID',
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '用户名',
}, {
field: 'password',
title: '账号',
sort: true
}
]
]
});
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.7 data
data值类型Array。直接赋值数据，既适用于只展示一页数据，也适用于展示多页数据。
属性data的基本使用，测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="layui/layui.all.js"></script>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: "#demo",
cols: [
[ //表头
{
field: 'id',
title: 'ID',
}, {
field: 'username',
title: '账号'
}, {
field: 'password',
title: '密码',
}
]
],
data: [{
"id": 111,
"username": "username111",
"password": "password111"
}, {
"id": 222,
"username": "username222",
"password": "password222"
}, {
"id": 333,
"username": "username333",
"password": "password333"
}, {
"id": 444,
"username": "username444",
"password": "password444"
}, {
"id": 555,
"username": "username555",
"password": "password555"
}, {
"id": 666,
"username": "username666",
"password": "password666"
}]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
开启分页，测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="layui/layui.all.js"></script>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: "#demo",
page: true, //开启分页
cols: [
[ //表头
{
field: 'id',
title: 'ID',
}, {
field: 'username',
title: '账号'
}, {
field: 'password',
title: '密码',
}
]
],
data: [{
"id": 111,
"username": "username111",
"password": "password111"
}, {
"id": 222,
"username": "username222",
"password": "password222"
}, {
"id": 333,
"username": "username333",
"password": "password333"
}, {
"id": 444,
"username": "username444",
"password": "password444"
}, {
"id": 555,
"username": "username555",
"password": "password555"
}, {
"id": 666,
"username": "username666",
"password": "password666"
}]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.8 totalRow
totalRow值类型Boolean。是否开启合计行区域。
注意：需要结合cols表头参数totalRowText或服务端返回数据的totalRow属性进行使用。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="layui/layui.all.js"></script>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: "#demo",
totalRow: true,
cols: [
[ //表头
{
field: 'id',
title: 'ID'
}, {
field: 'age',
title: '年龄',
totalRowText: '11111111111'
}, {
field: 'height',
title: '身高',
totalRowText: '22222222222'
}
]
],
data: [{
"id": 1,
"age": 11,
"height": 111
}, {
"id": 2,
"age": 22,
"height": 222
}, {
"id": 3,
"age": 33,
"height": 333
}]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.9 page
page值类型Boolean/Object。开启分页（默认：false）。支持传入一个对象，里面可包含laypage组件所有支持的参数（jump、elem除外）。
开启分页的测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="layui/layui.all.js"></script>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: "#demo",
page: true, //开启分页
totalRow: true,
cols: [
[ //表头
{
field: 'id',
title: 'ID'
}, {
field: 'age',
title: '年龄',
totalRowText: '11111111111'
}, {
field: 'height',
title: '身高',
totalRowText: '22222222222'
}
]
],
data: [{
"id": 1,
"age": 11,
"height": 111
}, {
"id": 2,
"age": 22,
"height": 222
}, {
"id": 3,
"age": 33,
"height": 333
}]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.10 limit
limit值类型Number。每页显示的条数（默认：10）。该值一定要对应limits参数。注意：优先级低于page参数中的limit参数。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="layui/layui.all.js"></script>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: "#demo",
cols: [
[ //表头
{
field: 'id',
title: 'ID'
}, {
field: 'age',
title: '年龄'
}, {
field: 'height',
title: '身高'
}
]
],
data: [{
"id": 1,
"age": 11,
"height": 111
}, {
"id": 2,
"age": 22,
"height": 222
}, {
"id": 3,
"age": 33,
"height": 333
}, {
"id": 4,
"age": 44,
"height": 444
}, {
"id": 5,
"age": 55,
"height": 555
}, {
"id": 6,
"age": 66,
"height": 666
}, {
"id": 7,
"age": 77,
"height": 777
}, {
"id": 8,
"age": 88,
"height": 888
}, {
"id": 9,
"age": 99,
"height": 999
}, {
"id": 10,
"age": 1010,
"height": 101010
}, {
"id": 11,
"age": 1111,
"height": 111111
}, {
"id": 12,
"age": 1212,
"height": 121212
}]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
默认一页显示10条记录。
一页显示5条记录的测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="layui/layui.all.js"></script>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: "#demo",
limit: 5,
cols: [
[ //表头
{
field: 'id',
title: 'ID'
}, {
field: 'age',
title: '年龄'
}, {
field: 'height',
title: '身高'
}
]
],
data: [{
"id": 1,
"age": 11,
"height": 111
}, {
"id": 2,
"age": 22,
"height": 222
}, {
"id": 3,
"age": 33,
"height": 333
}, {
"id": 4,
"age": 44,
"height": 444
}, {
"id": 5,
"age": 55,
"height": 555
}, {
"id": 6,
"age": 66,
"height": 666
}, {
"id": 7,
"age": 77,
"height": 777
}, {
"id": 8,
"age": 88,
"height": 888
}, {
"id": 9,
"age": 99,
"height": 999
}, {
"id": 10,
"age": 1010,
"height": 101010
}, {
"id": 11,
"age": 1111,
"height": 111111
}, {
"id": 12,
"age": 1212,
"height": 121212
}]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.11 limits
limits值类型Array。每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
注意：优先级低于page参数中的limits参数。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="layui/layui.all.js"></script>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: "#demo",
page: true,
limit: 5,
limits: [1, 3, 5, 7, 9],
cols: [
[ //表头
{
field: 'id',
title: 'ID'
}, {
field: 'age',
title: '年龄'
}, {
field: 'height',
title: '身高'
}
]
],
data: [{
"id": 1,
"age": 11,
"height": 111
}, {
"id": 2,
"age": 22,
"height": 222
}, {
"id": 3,
"age": 33,
"height": 333
}, {
"id": 4,
"age": 44,
"height": 444
}, {
"id": 5,
"age": 55,
"height": 555
}, {
"id": 6,
"age": 66,
"height": 666
}, {
"id": 7,
"age": 77,
"height": 777
}, {
"id": 8,
"age": 88,
"height": 888
}, {
"id": 9,
"age": 99,
"height": 999
}, {
"id": 10,
"age": 1010,
"height": 101010
}, {
"id": 11,
"age": 1111,
"height": 111111
}, {
"id": 12,
"age": 1212,
"height": 121212
}]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.12 loading
loading值类型Boolean。是否显示加载条（默认：true）。如果设置false，则在切换分页时，不会出现加载条。该参数只适用于url参数开启的方式。
1.23.3.13 title
title值类型String。定义table的大标题（在文件导出等地方会用到，对应Excel标签名）。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
toolbar: true,
title: "我是标題",
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '账号',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.14 text
text值类型Object。自定义文本，如空数据时显示的异常提示。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
page: true, //开启分页
text: {
none: '现在这个表格暂无相关数据'
},
data: [],
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '账号',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.15 autoSort
autoSort值类型Boolean。默认true，即直接由table组件在前端自动处理排序。若为false，则需自主排序，通常由服务端直接返回排序好的数据。
1.23.3.15.1 开启与禁用排序
禁用排序的测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
autoSort: false,
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '账号',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
</script>
</body>
</html>
启用排序的测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
autoSort: true,
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '账号',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.15.2 使用服务器端排序
文件asc.html代码如下：
{
"code": 0,
"msg": "",
"count": 1000,
"data": [{
"id": 1,
"username": "username1",
"password": "password1"
},
{
"id": 2,
"username": "username2",
"password": "password2"
},
{
"id": 3,
"username": "username3",
"password": "password3"
}
]
}
文件desc.html代码如下：
{
"code": 0,
"msg": "",
"count": 1000,
"data": [{
"id": 3,
"username": "username3",
"password": "password3"
},
{
"id": 2,
"username": "username2",
"password": "password2"
},
{
"id": 1,
"username": "username1",
"password": "password1"
}
]
}
模拟服务端排序的测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'asc.html', //数据接口
page: true, //开启分页
autoSort: false, //禁用客户端排序，使用服务端排序
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '账号',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
table.on('sort(test)', function(obj) {
//sort是工具条事件名，test是table原始容器的属性lay-filter="对应的值"
console.log(obj.field); //当前排序的字段名
console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
console.log(this); //当前排序的th对象
//尽管table自带排序功能，但并没有请求服务端。
//有些时候，可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序,
//示例代码如下：
var sortType = "";
if (obj.type == 'asc') {
sortType = "asc.html";
} else if (obj.type == 'desc') {
sortType = "desc.html";
} else if (obj.type == null) {
sortType = "asc.html";
}
table.reload('demo', {
initSort: obj, //记录初始排序，如果不设的话，将无法标记表头的排序状态。
url: sortType
//where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
/// field: obj.field, //排序字段
// order: obj.type //排序方式
//}
});
layer.msg('服务端排序，order by ' + obj.field + ' ' + obj.type);
});
</script>
</body>
</html>
注意：点击排序列时有3个值：asc正排序，desc倒排序，null默认值。
1.23.3.16 initSort
initSort值类型Object。初始排序状态，用于在数据表格渲染完毕时，默认按某个字段排序。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
autoSort: true,
initSort: {
field: 'id', //排序字段，对应 cols 设定的各字段名
type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
},
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '账号',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.3.17 id
id值类型String。设定容器唯一id。id是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引。该参数也可以自动从<table id="test"></table>中的id参数中获取。
1.23.3.18 设定表格外观
控制表格外观的主要参数由如图1-xx所示组成：
示例代码如下：
//“方法级渲染”配置方式
table.render({ //其它参数在此省略
skin: 'line', //行边框风格
even: true, //开启隔行背景
size: 'sm' //小尺寸的表格
});
等价于（“自动化渲染”配置方式）
<table class="layui-table" lay-data="{skin:'line', even:true, size:'sm'}" lay-filter="test"> …… </table>
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
skin: 'line', //行边框风格
even: true, //开启隔行背景
size: 'sm', //小尺寸的表格
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '账号',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
