layui提供了很多现成的模板，今天总结一下layui表格的分页展示。
1.前端页面：
先引入必要的layui.js和css文件。可去官网下载：https://www.layui.com/。
代码如下：
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>用户展示</title>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/js/layui-v2.4.5/layui/css/layui.css">
<script type="text/javascript" src="__PUBLIC__/js/layui-v2.4.5/layui/layui.js"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/layer.css">
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.8.0.min.js"></script>
<style>
body{margin: 10px;}
.demo-carousel{height: 200px; line-height: 200px; text-align: center;}
</style>
</head>
<body>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<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>
<div class="layui-tab layui-tab-brief" lay-filter="demo">
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-carousel" id="test1">
</div>
</div>
<div class="layui-tab-item">
<div id="laydateDemo"></div>
</div>
<div class="layui-tab-item">
<div id="pageDemo"></div>
</div>
<div class="layui-tab-item">
<div id="sliderDemo" style="margin: 50px 20px;"></div>
</div>
</div>
</div>
<script>
layui.config({
version: '1545041465480' //为了更新 js 缓存，可忽略
});
layui.use([ 'laypage', 'layer', 'table', 'element', 'slider'], function(){
var laypage = layui.laypage //分页
,layer = layui.layer //弹层
,table = layui.table //表格
,element = layui.element //元素操作
//监听Tab切换
element.on('tab(demo)', function(data){
layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
tips: 1
});
});
//执行一个 table 实例
table.render({
elem: '#demo'
,url: 'showUser' //数据接口
,title: '用户表'
,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
,limit:2 //一页显示多少条
,limits:[2,4,6]//每页条数的选择项
,groups: 2 //只显示 2 个连续页码
,first: "首页" //不显示首页
,last: "尾页" //不显示尾页
}
,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
,cols: [[ //表头
{type: 'checkbox', fixed: 'left'}
,{field: 'id', title: 'ID', width:50, sort: true}
,{field: 'username', title: '用户名', width:80}
,{field: 'realname', title: '真实姓名', width: 100, sort: true, totalRow: true}
,{field:'sex', title: '性别', width: 60
,templet: function(d){
return (d.sex == "1") ? "男": "女";
}
}
,{field: 'dept', title: '所在部门', width: 100, sort: true, totalRow: true}
,{field: 'role', title: '当前职位', width:100}
,{field: 'phone', title: '电话', width: 120}
,{field: 'email', title: '邮箱', width: 150}
,{field: 'ctime', title: '入职时间', width: 105, sort: true, totalRow: true}
,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
]]
});
//监听头工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id)
,data = checkStatus.data; //获取选中的数据
switch(obj.event){
case 'add':
layer.msg('添加');
break;
case 'update':
if(data.length === 0){
layer.msg('请选择一行');
} else if(data.length > 1){
layer.msg('只能同时编辑一个');
} else {
layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
}
break;
case 'delete':
if(data.length === 0){
layer.msg('请选择一行');
} else {
layer.msg('删除');
}
break;
};
});
});
</script>
</body>
</html>
2.后台
在tp5 Controller层需要通过Mode实例化对象连接数据库查询表中的数据，然后以layui table的特定数组格式返回给前台，通过渲染实现数据的分页。
代码如下：
public function showUser(){
//获取总条数
$list = Users::all();
$count=count($list);
//获取每页显示的条数
$limit= Request::instance()->param('limit');
//获取当前页数
$page= Request::instance()->param('page');
//计算出从那条开始查询
$tol=($page-1)*$limit;
// 查询出当前页数显示的数据
$list = db('users')->limit($tol,$limit)->select();
//返回数据
$arr=array();
$arr['code']=0;
$arr['msg']="";
$arr['count']=$count;
$arr['data'] = $list;
$arr_json=json_encode($arr);
echo $arr_json;
}
访问controller 层的showUser方法可以看到数组格式的数据：
虽然中文格式乱码了，但是不用担心，只要你数据库设置的编码格式是utf-8并且前台也是中文编码就没问题。需要特别注意的是返回的数据格式必须要让table支持才可以，不然就会报接口错误。默认格式如下：
默认接受的数据格式
{
code: 0,
msg: "",
count: 1000,
data: []
}
后台已经得到数据，需要写一个方法先返回view层页面通过接口访问controller层方法获得数据才可以渲染：
public function returnShowUser()
{
// return $this->fetch();
return view('showUser');
}
然后输入地址：localhost/index.php/admin/index/returnShowUser 就可以看到成功分页了！
好了，就写到这里。如果有疑问可直接回复！
2009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
