Layui中的table
首先抄送一下官网的话
我们先来看一下案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Layui中的表格</title>
<link rel="stylesheet" href="./layui/css/layui.css" />
<script src="./layui/layui.js"></script>
</head>
<body>
<!-- -->
<table id="test" lay-filter="test"></table>
</body>
</html>
<script>
layui.use(\'table\', function () {
var table = layui.table
// 第一个实例
table.render({
elem: \'#test\', // 指定table模板 也就是上方的table DOM
height: 400, // 指定Table模板的高度
url: \'/config/user.json\', // 对应的数据接口,这边直接是请求的json文件
page: true, // 开启分页
cols: [
[
//表头》》》指定的对应字段
{ field: \'id\', title: \'ID\', sort: true, fixed: \'left\' },
{ field: \'username\', title: \'用户名\' },
{ field: \'sex\', title: \'性别\', sort: true },
{ field: \'city\', title: \'城市\' },
{ field: \'sign\', title: \'签名\' },
{ field: \'experience\', title: \'积分\', sort: true },
{ field: \'score\', title: \'评分\', sort: true },
{ field: \'classify\', title: \'职业\' },
{ field: \'wealth\', title: \'财富\', sort: true },
],