Collection
Collection
原文地址：https://blog.csdn.net/qq_42942555/article/details/86573879
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
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;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
访问controller 层的showUser方法可以看到数组格式的数据：
虽然中文格式乱码了，但是不用担心，只要你数据库设置的编码格式是utf-8并且前台也是中文编码就没问题。需要特别注意的是返回的数据格式必须要让table支持才可以，不然就会报接口错误。默认格式如下：
默认接受的数据格式
{
code: 0,
msg: “”,
count: 1000,
data: []
}
1
2
3
4
5
6
7
后台已经得到数据，需要写一个方法先返回view层页面通过接口访问controller层方法获得数据才可以渲染：
public function returnShowUser()
{// return $this->fetch();return view('showUser');}
1
2
3
4
5
6
然后输入地址：localhost/index.php/admin/index/returnShowUser 就可以看到成功分页了！
好了，就写到这里。如果有疑问可直接回复！
————————————————
版权声明：本文为CSDN博主「钓鱼要到岛上钓」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42942555/article/details/86573879
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
