服务器之家

服务器之家 > 正文

thinkPHP5使用laypage分页插件实现列表分页功能

时间:2021-07-19 09:51     来源/作者:Wangkekeing

一、背景

      在使用thinkphp框架做项目的时候,经常会遇到对列表的内容进行分页。thinkphp框架中自带了分页功能,但是有缺陷。这个缺陷是每次返回每页数据给页面时需要重新加载页面所需要的js、css等资源。如果页面包含的js过多、过大,会增加流量压力。因此,我们使用laypage插件。每次使用ajax请求获取每页的数据就可以了,不需要重复加载页面。

二、分页流程

如下图所示:

thinkPHP5使用laypage分页插件实现列表分页功能

流程说明:

        1) 调研app.php中的函数,该函数调用fetch函数。fetch函数渲染list.html.
        2) list.html 调用获取总页数的函数,并得到总页数。
        3) 获取第一页数据。
        4)初始化laypage分页插件。
        5)点击页码,触发分页查询。

三、实现分页功能相关的代码

1、app.php controller的代码

?
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
//fetch渲染页面
public function index()
{
 return $this->fetch('list');
}
 
 
 
 //根据页面传入的页码查询数据
 public function getpage()
 {
   
   <span style="color:#ff0000;">// 获取页面传入的页码 </span>     
   $nowpage = input("page");
   //每页显示10条数据
   $limits = 10;
 
   $app = new appinfo();
   $page_info = $app->limit(($nowpage * $limits), $limits)->select();
 
   // ajax 分页输出
   $info = ['pageinfo'=>$page_info,'nowpage'=>$nowpage,'nowpage'=>$nowpage];
 
  return json($info);
 
 
 }
 
 
 //获取所有页数
public function getallpage(){
 
 try{
  $count = appinfo::count();
 
  $limits = 10;
  // 计算总页面
  $allpage = ceil($count / $limits);
 
  $info =['allpage'=>$allpage];
 }catch (\exception $e){
  abort(500,$e->getmessage(),['result'=>topsecgwerrer::topsec_gw_err_no_unknown]);
 }
 
 return json($info);
}

2、list.html中的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
<div class="box-body">
  <table id="table1" class="table table-bordered table-striped">
   <thead>
   <tr>
    <th>应用名称</th>
    <th>应用类型</th>
    <th>应用图像</th>
    <th>创建日期</th>
    <th>修改日期</th>
    <th>操作</th>
   </tr>
   </thead>
   <tbody id="table_body"></tbody>
   <tfoot>
 
   </tfoot>
  </table>
  <div id="result"></div>
  <div class=" ">
   <button id="add_app" type="button" class="btn btn-primary col-xs-offset-5" >
    <span class='fa fa-tasks white'></span>丨添加应用
   </button>
  </div>
  <div id="content"> </div>
  <div class="box-body">
 
   <button id="add_img" type="button" class="btn btn-primary col-xs-offset-5" >
    <span class='fa fa-tasks white'></span>丨添加图片
   </button>
  </div>
 
  <!-- /.box-body -->
 </div>

3、list.html中的jquery代码

?
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
//pagecount:总页数。用于初始化laypage分页控件。
//pageindex:初始化当前页。显示第一页。
//currentpage:当前页数。
//getpagedata:获取每页数据的函数。
//url:获取每页数据的方法的路径。由控制器和函数名组成。
 function jsonpage(pagecount, pageindex,currentpage, getpagedata,url) {
  var laypageindex = laypage({
   cont: 'result', //容器。值支持id名、原生dom对象,jquery对象。
   skin: '#3c8dbc',
   pages: pagecount, //通过后台拿到的总页数
   curr: pageindex, //初始化当前页
   prev: '上一页', //若不显示,设置false即可
   next: '下一页', //若不显示,设置false即可
   skip: true, //是否开启跳页
   jump: function (obj, first) { //触发分页后的回调
    //getpagedata(1);
    if (!first) { //点击跳页触发函数自身,并传递当前页:obj.curr
     getpagedata(url,obj.curr);
     currentpage = obj.curr;
    }
   }
  });
 }
 
 
/url:获取总页数据的方法的路径。由控制器和函数名组成。 
 function getallpage(url){
 
  var tmp ;
  $.ajax({
   type: "get",
   datatype: "json",
   async: false,
   url: public_base+url,
   success: function(json) {
    var data = eval(json);
    tmp=data.allpage;
   },
   error: function(json) {
 
   }
 
  });
  return tmp;
 
 }
 
 //data:每页的数据。由json对象组成。
 function instantiation(data) {
  //begin $.each
  $.each(data.pageinfo, function (index, item) {
   $("#table_body").append($('<tr class="table_tr"/>')
    .append($("<td/>").html(item.name))
    .append($("<td/>").html(item.desc))
    .append($("<td/>").html("<img src='"+item.appimg+"' />"))
    .append($("<td/>").html(item.create_time))
    .append($("<td/>").html(item.update_time))
    .append(
     $("<td />")
      .append($("<a class='yellow' id='view"+item.id+"'><i class='fa fa-eye fa-fw'></i>查看丨 </a>"))
      .append($("<a class='green' id='edit"+item.id+"'><i class='fa fa-edit fa-fw'></i>编辑丨 </a>"))
      .append($("<a class='red' id='delete"+item.id+"'><i class='fa fa-remove fa-fw'></i>删除丨 </a>"))
      .append($("<a class='blue' id='forbid" + item.id + "'><i class='fa fa-ban fa-fw'></i>禁用</a>"))
 
    )
 
   );
 
   $("#view"+item.id).click(function() {
    fillmaincontent("/application/application?model=view&id="+item.id);
   })
 
   $("#edit"+item.id).click(function() {
    fillmaincontent("/application/application?model=edit&id="+item.id);
   })
 
   $("#delete"+item.id).click(function() {
 
    deleteapp(item.id);
    alert("删除成功");
 
   })
 
   $("#forbid"+item.id).click(function() {
    deleteapp(item.id);
    alert("删除成功");
    getpagedata(currentpage);
   })
 
  });
  //end $.each
   
 
 //获取每页的数据。curr:页码 ,curl:获取数据的路径。
 function getpagedata(url,curr) {
  curr = curr-1;
  $.ajax({
 
   type: "get",
   datatype: "json",
   data: {page:curr},
   url: public_base+url,
   success: function(json) {
    $('#table_body').empty();
    var data = eval(json);
    console.log(data);
 
    instantiation(data);
   },
 
   error: function(json) {
 
    var data = eval(json);
    console.log(data);
 
   }
 
  });
 
 }
 
 <span style="color:#ff0000;">//调用函数实现分页</span>
//获取总页数,用于初始化分页控件总页数
 pagecount= getallpage("/application/getallpage");
 //获取第一页数据
 getpagedata("/application/getpage",1);
 //初始化分页控件并分页
 jsonpage(pagecount,pageindex,currentpage,getpagedata,"/application/getpage");

四、参考资源

http://laypage.layui.com/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:http://blog.csdn.net/xiangguiwang/article/details/54695198

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021德云社封箱演出完整版 2021年德云社封箱演出在线看
2021德云社封箱演出完整版 2021年德云社封箱演出在线看 2021-03-15
返回顶部