1、新建web项目,加入下载好的layui框架文件,如下图所示。
2、在http://www.layui.com/doc/modules/table.html,layui开发文档中找到内置模块的数据表格。复制下面代码(如下代码表格的字段数我做了修改,对应后面json文件中的字段)
3、更改代码中资源路径为自己的本地正确路径代码中红色标注处
4、在浏览器中查看发现数据接口异常,确实如此,这个例子是动态加载后端数据的。所以要配置后端服务接口。为了展示表格的效果我用加载本地文件的方式。
5、在项目根目录下新建json文件,(当然你可以在其他目录下新建但是正确配置第七步中所说的数据文件路径)复制如下代码作为表格数据
{
“code”:0,
“msg”:“msg”,
“count”:100,
“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”: “城市-