- 下载地址 https://www.layui.com/
- 点击实例，找到layui适合模板
2.
新建html将代码复制到对应模板，修改对应样式路径。
5.修改对应参数（url,field）
追加以下参数： ,page: true ,limit:5 ,limits:[3,5,8]
<!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="__STATIC__/layui/css/layui.css" media="all"> <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --> </head> <body> <table class="layui-hide" id="test" lay-filter="test"></table> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button> <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button> <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> </div> </script> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> <script src="__STATIC__/layui/layui.js" charset="utf-8"></script> <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 --> <script> layui.use(‘table‘, function(){ var table = layui.table; table.render({ elem: ‘#test‘ ,url:‘/homework/homework/layuiList‘//****接口地址需修改 **** // ,url:‘{:url(‘/homework/homework/layuiList‘)}‘ ,toolbar: ‘#toolbarDemo‘ //开启头部工具栏，并为其绑定左侧模板 ,defaultToolbar: [‘filter‘, ‘exports‘, ‘print‘, { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可 title: ‘提示‘ ,layEvent: ‘LAYTABLE_TIPS‘ ,icon: ‘layui-icon-tips‘ }] ,title: ‘用户数据表‘ ,cols: [[ {type: ‘checkbox‘, fixed: ‘left‘} ,{field:‘id‘, title:‘ID‘, width:80, fixed: ‘left‘, unresize: true, sort: true} ,{field:‘name‘, title:‘用户名‘, width:120, edit: ‘text‘} ,{field:‘cate‘, title:‘分类‘, width:80, edit: ‘text‘, sort: true} ,{field:‘put‘, title:‘状态‘, width:100} ,{field:‘reserve‘, title:‘商品库存‘} ,{field:‘price‘, title:‘本店售价‘, width:80, sort: true} ,{fixed: ‘right‘, title:‘操作‘, toolbar: ‘#barDemo‘, width:150} ]] ,page: true ,limit:5 ,limits:[3,5,8] }); //头工具栏事件 table.on(‘toolbar(test)‘, function(obj){ var checkStatus = table.checkStatus(obj.config.id); switch(obj.event){ case ‘getCheckData‘: var data = checkStatus.data; layer.alert(JSON.stringify(data)); break; case ‘getCheckLength‘: var data = checkStatus.data; layer.msg(‘选中了：‘+ data.length + ‘ 个‘); break; case ‘isAll‘: layer.msg(checkStatus.isAll ? ‘全选‘: ‘未全选‘); break; //自定义头工具栏右侧图标 - 提示 case ‘LAYTABLE_TIPS‘: layer.alert(‘这是工具栏右侧自定义的一个图标按钮‘); break; }; }); //监听行工具事件 table.on(‘tool(test)‘, function(obj){ var data = obj.data; //console.log(obj) if(obj.event === ‘del‘){ layer.confirm(‘真的删除行么‘, function(index){ obj.del(); layer.close(index); }); } else if(obj.event === ‘edit‘){ layer.prompt({ formType: 2 ,value: data.email }, function(value, index){ obj.update({ email: value }); layer.close(index); }); } }); }); </script> </body> </html>
控制器代码：
//数据接口 对应 ,url:‘/homework/homework/layuiList‘//****接口地址需修改 **** public function layuiList() { //接受参数 $page=input(‘page‘)?input(‘page‘):1;//当前页 $limit=input(‘limit‘)?input(‘limit‘):5;//每页截取的数据 //查询数据库 $data = HomeworkModel::layList($page,$limit); //数据库总条数 $count=HomeworkModel::layuiCount(); $jsonData = [ ‘code‘ => 0, ‘message‘ => ‘success‘, ‘data‘ => $data, ‘count‘=>$count, ]; return json($jsonData); }
模型代码：
public static function layList($page,$limit){ // * @param mixed $page 页数 // * @param mixed $limit 每页数量 return self::page($page,$limit)->select(); } //总条数 public static function layuiCount(){ return self::count(); }