ThinkPHP结合laypage实现ajax分页

来源：互联网发布：linux 定时编辑：程序博客网时间：2024/05/14 07:56

前面文章提到过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="";            for (var i = 0; i < data.length; i++) {                if(data[i].is_release == 1){                  release = ' <a onclick="del('+data[i].img_id+')" style="position: absolute;right:-10%;top:40%;" class="btn btn-outline btn-danger btn-xs">删除</a><a onclick="release('+data[i].img_id+','+data[i].is_release+')" style="position: absolute;right:-10%;top:60%;" class="btn btn-outline btn-warning btn-xs">发布</a>';                }else{                  release = '<a onclick="release('+data[i].img_id+','+data[i].is_release+')" style="position: absolute;right:-10%;top:60%;" class="btn btn-outline btn-warning btn-xs">下线</a>';                }                html += '<div style="display:inline-block;width:185px;position: relative;">'+                          '<a style="display: inline-block; width:180px;height:120.15px; margin: 20px; box-sizing: border-box;" href="__IM__'+data[i].img_url+'" title="'+data[i].img_des+'" data-gallery="">'+                              '<img style="width:100%;height:100%;" src="__IM__'+data[i].img_url+'">'+                          '</a>'+                            '<a href="'+你的url+'/id/'+data[i].img_id+'.html" style="position: absolute;right:-10%;top:20%;" class="btn btn-outline btn-info btn-xs">详情</a>'+                            release+                        '</div>'+                      '<div id="blueimp-gallery" class="blueimp-gallery">'+                          '<div class="slides"></div>'+                          '<h3 class="title"></h3>'+                          '<a class="prev">‹</a>'+                          '<a class="next">›</a>'+                          '<a class="close">×</a>'+                          '<a class="play-pause"></a>'+                          '<ol class="indicator"></ol>'+                      '</div>';            }             $("#returndata").html(html);        });    }  });}</script>

7 。总结：完整代码如下

(1).前端：

//引入layui<body class="gray-bg">    <div class="wrapper wrapper-content">        <div class="row">            <div class="col-lg-12">                <div class="ibox float-e-margins">                     <div class="ibox-title">                        <div class="col-sm-6">                        <input type="text" class="form-control input-sm m-b-xs" id="filter"                               placeholder="搜索...">                        </div><button data-toggle="modal" class="btn btn-primary btn-sm"  width="50px;" href="#modal-form">发布图片</button>                        <div class="ibox-tools">                            <a onclick="javascript:window.location.reload();">                                <i class="fa fa-refresh">刷新</i>                            </a>                        </div>                        <div class="ibox-tools">                            <a href="javascript:history.back()">                                <i class="fa fa-mail-reply">返回</i>                            </a>                        </div>                        <div style="margin-left: 2%;">                            <!-- <strong>浏览banner</strong> -->                        </div>                                            </div>                    <div class="ibox-content">                        <div class="lightBoxGallery">                          <div id="returndata">                            <!-- 分页容器 -->                          </div>                        </div>                    </div>                    <div class="col-sm-12">                        <div id="paginte"></div> <!--分页-->                     </div>                </div>            </div>        </div>    </div><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("'+服务端请求地址+'",{page:obj.curr,pageshow:obj.limit},function(data){  //ajax请求后端 查询出数据进行遍历 写入html            var html = "";            var release="";            for (var i = 0; i < data.length; i++) {                if(data[i].is_release == 1){                  release = ' <a onclick="del('+data[i].img_id+')" style="position: absolute;right:-10%;top:40%;" class="btn btn-outline btn-danger btn-xs">删除</a><a onclick="release('+data[i].img_id+','+data[i].is_release+')" style="position: absolute;right:-10%;top:60%;" class="btn btn-outline btn-warning btn-xs">发布</a>';                }else{                  release = '<a onclick="release('+data[i].img_id+','+data[i].is_release+')" style="position: absolute;right:-10%;top:60%;" class="btn btn-outline btn-warning btn-xs">下线</a>';                }                html += '<div style="display:inline-block;width:185px;position: relative;">'+                          '<a style="display: inline-block; width:180px;height:120.15px; margin: 20px; box-sizing: border-box;" href="__IM__'+data[i].img_url+'" title="'+data[i].img_des+'" data-gallery="">'+                              '<img style="width:100%;height:100%;" src="__IM__'+data[i].img_url+'">'+                          '</a>'+                            '<a href="/'+你的URL+'/id/'+data[i].img_id+'.html" style="position: absolute;right:-10%;top:20%;" class="btn btn-outline btn-info btn-xs">详情</a>'+                            release+                        '</div>'+                      '<div id="blueimp-gallery" class="blueimp-gallery">'+                          '<div class="slides"></div>'+                          '<h3 class="title"></h3>'+                          '<a class="prev">‹</a>'+                          '<a class="next">›</a>'+                          '<a class="close">×</a>'+                          '<a class="play-pause"></a>'+                          '<ol class="indicator"></ol>'+                      '</div>';            }             $("#returndata").html(html);        });    }  });}</script>

(2).后端

public function index()    {            //获取分类        $img_cate = Db::query("select img_cate_id,img_cate_name from tb_img_cate where is_release = 0 and is_delete = 0");        $count = Db::query("select count(img_id) as count from tb_img where is_delete = 0");        $total_num = $count[0]['count'];                $res = Db::query("select img_id,img_url,img_des,add_time,is_release,is_delete from tb_img where is_delete = 0 order by add_time desc");        $this->assign('img_cate',$img_cate);        $this->assign('total_num',$total_num);        $this->assign('res',$res);        $this->assign('title','图片管理');        return view();    }    /**     * AJAX分页     */    public function page()    {        $page = @$_GET['page']?$_GET['page']:1;        $pageshow = isset($_GET['pageshow'])?$_GET['pageshow']:24; //每页显示多少条数据        //总条数        $count = Db::query("select count(img_id) as count from tb_img where is_delete = 0");        $total_num = $count[0]['count'];        $pagesize = $pageshow;//每页显示条数        $page_num = ceil($total_num/$pagesize); //最大页 总页数        if($page < 1){            $page = 1;        }        if($page >= $page_num){             $page = $page_num;        }        $limit = ($page-1)*$pagesize;        $img_select = Db::query("select img_id,img_url,img_des,add_time,is_release,is_delete from tb_img where is_delete = 0 order by add_time desc limit $limit,$pagesize");        return $img_select;    }

8。最终效果。

阅读全文

0 0