ThinkPHP结合laypage实现ajax分页

最新推荐文章于 2021-12-28 22:33:22 发布

code301

最新推荐文章于 2021-12-28 22:33:22 发布

阅读量1k

点赞数

分类专栏： PHP 文章标签： ajax thinkphp PHP

本文链接：https://blog.csdn.net/AnPHPer/article/details/78744025

版权

本文介绍了如何结合laypage插件和ThinkPHP框架，通过Ajax实现分页功能，以达到更佳的用户体验。通过在页面上设置容器，配置laypage参数，并在前端进行相应的处理，可以轻松创建出多种样式的分页效果。

摘要由CSDN通过智能技术生成

前面文章提到过ajax分页,但是总感觉效果达不到自己的想要的标准,于是便将laypage引用过来结合tp5，完美实现分页，既简洁又好看。

先放一张效果图

真是没有对比就没有伤害。先来一波layer的传送门：http://www.layui.com/demo/laypage.html点击打开链接

分页样式任你选择，并且免费开源（感谢贤心大神）。

下载好layui，将layui引入到你需要使用的位置（建议引入到公共CSS,JS里面），就可以开始你的laypage ajax分页了

1。首先在你需要放置分页的位置建立一个容器

<div id="paginte"></div> <!--分页-->

2。然后页面准备一个存储分页数据的容器div

<div id="returndata">
 <!-- 分页容器 -->
</div>

3。准备分页，后台查询出总共有多少条数据（其他框架同理，以TP5为例）

4。前端准备，laypage同样也提供了完整的demo（建议先看文档）

  laypage.render({  //执行一个laypage实例
    elem: 'pageinte' //注意，这里的 pageinte 是 ID，不用加 # 号  你需要放置分页的位置 div的ID
    ,count: 50 //数据总数，从服务端得到  分配过来的变量 {$total_num}
  });

5。上一步可以得到总数据条数，接下来在PHP端，我们需要进行SQL的分页处理处理

6。前端开始分页

<script>
  layui.use(['laypage', 'layer'], function(){
    paginte(layui);
});
 function paginte(layui){   //如需带参数分页，如搜索条件 传入paginte即可
   var laypage = layui.laypage
  ,layer = layui.layer;
  //完整功能
  laypage.render({
    elem: 'paginte'         //放置分页处的ID 不用加#
    ,count: {$total_num}    //后端查询出来的总条数
    ,limits:[1,12,24,36,48]  // 自定义 Array 每页显示多少条 默认 [10, 20, 30, 40, 50]
    ,limit:24                //默认单页显示多少条
    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']  //skip 跳转到多少页
    ,jump: function(obj){
        // console.log(obj);
        $.get("'+服务端URL+'",{page:obj.curr,pageshow:obj.limit},function(data){  //ajax请求后端 查询出数据进行遍历 写入html
            var html = "";
            var release=