### 新建模板文件
比如我们想在views目录下的tplay文件夹下新建一个index.html,这个index.html主要完成列表功能
~~~
<div class="tplay-body">
</div>
~~~
我们只要写一对div标签,并定义其class="tplay-body",这样我们的一个页面就初步建成了,剩下的就是在这对div标签里书写需要的html代码。
### 建一个Layui数据表格
~~~
<div class="tplay-body">
<table id="tplay-admin" lay-filter="tplay-admin">
</table>
</div>
~~~
> 注意:数据表格的id和lay-filter千万不要忘记,后面会有大作用
>
之后在页面的底部加入js代码
~~~
<script type="text/javascript">
layui.use(['table', 'apiconfig'], function(){
var $ = layui.$ //引入jq扩展模块
,table = layui.table //引入layui的表格模块
,config = layui.apiconfig; //引入config扩展模块
table.render({
elem: '#tplay-admin' //表格 id
,url: config.domain+'/admin/system/index' //配置文件里的domain配置+接口地址
,page: true //开启分页
,limit:15 //默认每页条数
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field: 'key', title: 'key'}
,{field: 'name', title: '名称'}
,{field: 'value', title: '值'}
,{field: 'create_time', title: '创建时间'}
]]
,skin: 'line'
});
});
</script>
~~~
这样就完成了一个数据表格的搭建,其实这些都是layui的使用,不明白的可参考layui的开发文档[layui开发文档](http://www.layui.com/doc/)
> 当然了,我们刚建好的这个html文件还是不能直接被访问到的,我们需要在/public/admin/api/routes.json文件中给这个html文件配置访问路由后才可被访问。