- 下載地址 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(); }