layui数据表格以及分页使用
1、下载layui框架地址http://www.layui.com/
2、本人是在hbuilder中测试的，所以在hbuilder中新建web项目，加入下载好的layui框架文件，如下图所示。
3、在http://www.layui.com/doc/modules/table.html，layui开发文档中找到内置模块的数据表格。复制下面代码（如下代码表格的字段数我做了修改，对应后面json文件中的字段）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<table class="layui-hide" id="test"></table>
<script src="layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use("table", function(){
var table = layui.table;
table.render({
elem: "#test"
,url:"tableData.json"
,cols: [[
{field:"id", width:80, title: "ID", sort: true}
,{field:"username", width:80, title: "用户名"}
,{field:"sex", width:80, title: "性别", sort: true}
,{field:"city", width:80, title: "城市"}
,{field:"sign", title: "签名", width:80}
]]
,page: true
});
});
</script>
</body>
</html>
4、更改代码中资源路径为自己的本地正确路径代码中红色标注处
5、在浏览器中查看发现数据接口异常，确实如此，这个例子是动态加载后端数据的。所以要配置后端服务接口。为了展示表格的效果我用加载本地文件的方式。
6、在项目根目录下新建json文件，（当然你可以在其他目录下新建但是正确配置第七步中所说的数据文件路径）复制如下代码作为表格数据
{
"code":0,
"msg":"ms",
"count":1000,
"data":[
{"id": 1, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0"},
{"id": 2, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0"},
{"id": 3, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0"},
{"id": 4, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0"},
{"id": 5, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0"},
{"id": 6, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0"},
{"id": 7, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0"},
{"id": 8, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0"},
{"id": 9, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0"},
{"id": 10, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0"},
{"id": 11, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0"},
{"id": 12, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0"},
{"id": 13, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0"},
{"id": 14, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0"},
{"id": 15, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0"},
{"id": 16, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0"}
]}
7、Html中修改数据文件所在路径，如下代码（如果你在其他路径下创建的json文件，请正确配置你自己的路径）
url:"tableData.json"
8、在浏览器中查看效果如下图
9、发现分页没有效果，这是正常情况。因为我们的数据是静态的，我们点击页码，虽然每次发出的请求是不同的，但是由于我们没有后端服务，所以我们的不同请求不会得到不同处理。为了说明这个情况，请打开浏览器调试窗口的NetWork选项卡，此时点击分页组件中的页码，发现有不同请求发出。
10、两个参数，一个page,另外一个limit,page指的是当前页码，limit值每页中数据的条数。如果我们有后端服务，就可以根据参数做出不同的处理，给出不同的返回数据。
11、其他参数详解请看帮助文档http://www.layui.com/doc/modules/table.html
12、有任何疑问欢迎留言
