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