个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 31 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章thinkPHP5使用laypage分页插件实现列表分页功能由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

1、背景 。

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

2、分页流程 。

如下图所示:

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

流程说明:

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

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

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

4、参考资源 。

http://laypage.layui.com/ 。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

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

最后此篇关于thinkPHP5使用laypage分页插件实现列表分页功能的文章就讲到这里了,如果你想了解更多关于thinkPHP5使用laypage分页插件实现列表分页功能的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

31 4 0
文章推荐： Thinkphp5+PHPExcel实现批量上传表格数据功能
文章推荐： python操作mysql、excel、pdf的示例
文章推荐： OpenCV如何去除图片中的阴影的实现
文章推荐： Python实现随机游走的详细解释
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com