<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table模块快速使用</title> <link rel="stylesheet" href="__STATIC__/layui/css/layui.css" media="all"> </head> <body> <table id="demo" lay-filter="test"></table> <script src="__STATIC__/layui/layui.js"></script> <script> layui.use('table', function(){ var table = layui.table; //第一个实例 table.render({ elem: '#demo' ,height: 312 ,url:"{:url('Readerset/test5')}" //数据接口 ,page: true //开启分页 ,id:'tryReload' ,parseData:function(res){ return{ "code":0, "msg":"", "count":8, data:res } } ,cols: [[ //表头 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} ,{field: 'name', title: '用户名', width:80} ,{field: 'sex', title: '性别', width:80, sort: true} ,{field: 'barcode', title: '城市', width:80} ,{field: 'vocation', title: '签名', width: 177} ,{field: 'birthday', title: '积分', width: 80, sort: true} ,{field: 'paperType', title: '评分', width: 80, sort: true} ,{field: 'paperNo', title: '职业', width: 80} ,{field: 'tel', title: '财富', width: 135, sort: true} ]] }); }); </script> </body> </html>
表格数据是我胡乱编排的,请不要注意!
tp5控制器端文件
public function test5() { $Data=Db::name('reader')->select(); return json($Data); }
为实现交互一定要注意上面的id:tryReload具体详情,请查询其他!