php分页加layer,thinkphp结合layui做分页

layui提供了很多现成的模板，今天总结一下layui表格的分页展示。

1.前端页面：

先引入必要的layui.js和css文件。可去官网下载：https://www.layui.com/。

代码如下：

用户展示

body{margin: 10px;}

.demo-carousel{height: 200px; line-height: 200px; text-align: center;}

查看

编辑

删除

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;

};

});

});

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();

returnview('showUser');

}

1

2

3

4

5

6

然后输入地址：localhost/index.php/admin/index/returnShowUser 就可以看到成功分页了！

好了，就写到这里。如果有疑问可直接回复！

————————————————

版权声明：本文为CSDN博主「钓鱼要到岛上钓」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。