欢迎您访问我的笔记本站旨在于记录一些平时工作中遇到的一些问题和解决方法,方便查阅,部分内容来源于网络,如有侵权请联系我删除
  • 微信微信
您现在的位置是:首页 > JQuery/Js

JS分页(bootstrap)-[原创]

日期:2018-09-10 16:43:49 作者:tanyi 来源:我的笔记 浏览:1086 次
一个简单的js分页,须后台配合返回分页信息,js文件只是处理实现分页显示,由于很多时候有些功能需要定制,所以用第三方插件或网上找的些代码调试起来很麻烦,所以还是自己动手吧

默认样式用的bootstrap,所以需要加载bootstrap.css,同时需要加载jQuery

html代码里面分页位置只需放一个ul:<ul class="pagination"></ul>

js代码:

/**
 *
 * 参数obj包含字段
 *"obj":{
        "page":"2", //当前页 (必须)
        "rows":1, //每页显示条数
        "next":3, //下一页 (必须)
        "pre":1,  //上一页 (必须)
        "last_page":7,  //最后一页|总页数
        "is_more":true, //是否有下一页
        "limit":"1,1",  //查询数据limit字符串
        "total":7  //总数据条数
    }
 *
 * @param method  请求分页数据方法
 *
 * demo:
 *
 * 分页:
 * <ul class="pagination"></ul>
 *
 * @param page 请求第page页的数据集合,附带返回分页信息obj

   请求分页数据
 * function get_page(page){
 *     $.post("list.php",{page:page},function(re){
 *        //返回数据格式举例
 *        { "list":{//数据集合}
 *          "obj":{
                    "page":"2", //当前页 (必须)
                    "rows":1, //每页显示条数
                    "next":3, //下一页 (必须)
                    "pre":1,  //上一页 (必须)
                    "last_page":7,  //最后一页|总页数
                    "is_more":true, //是否有下一页
                    "limit":"1,1",  //查询数据limit字符串
                    "total":7  //总数据条数
                   }
 *        }
 *
 *        //处理数据集合
 *         。。。。。。
 *
 *        //调用分页方法
 *
 *        structure_page(re.obj,'get_page');

 *     })
 * }
 *
 * 第一次进入页面默认请求第一页数据。
 *
 * get_page(1);
 * */


var show_page=1; //偏移量,举例设为1,当前页为3,那么分页显示为2,3,4

function structure_page(obj,method){


            var html='';

            var cla_pre=obj.page>1?'':'disabled';

            html+="<li class='"+cla_pre+"'><a  href='javascript:"+method+"("+obj.pre+")'>上一页</a></li>";

            if(show_page>=obj.last_page){
                for(var i=1;i<=obj.last_page;i++){
                    var cla=i==obj.page?'active':'';
                    html+="<li class='"+cla+"'><a  href='javascript:"+method+"("+i+")'>"+i+"</a></li>";
                }
            }else{
                for(var i=obj.page*1-show_page*1;i<=obj.page*1+show_page*1;i++){
                     var cla=i==obj.page?'active':'';
                     if(i>0 && i<=obj.last_page){
                         html+="<li class='"+cla+"'><a  href='javascript:"+method+"("+i+")'>"+i+"</a></li>";
                     }
                }
            }
            var cla_next=obj.page<obj.last_page?'':'disabled';

             html+="<li class='"+cla_next+"'><a   href='javascript:"+method+"("+obj.next+")'>下一页</a></li>";

            $('.pagination').html('');
            $('.pagination').append(html);
}

后台一个分页处理方法,用于向前台返回分页信息,此方法是写在tp5里面,所以参数获取用的tp5里面的方法:

/**
 * 分页函数
 * @param $total 数据总条数
 * @param $page 当前页
 * @param $rows 每页显示多少条
 * @param $next 下一页
 * @param $pre 上一页
 * @param $last_page 总页数,最后一页
 * @param $is_more 是否有下一页
 * @param $limit 数据查询拼接limit
 */

function page($total=0){
    $parm=request()->param();
    $is_more=true;
    $rows=isset($parm['rows'])?$parm['rows']:1;
    $page=isset($parm['page'])?$parm['page']:1;

    $last_page=ceil($total/$rows);

    if($page>=$last_page) $is_more=false;

    if($page>$last_page) $page=$last_page;

    $first_limit=($page-1)*$rows;

    if($last_page==0){
        $rows=$first_limit=0;
    }

    $limit=$first_limit.','.$rows;

    $next=($page+1)>$last_page?$last_page:$page+1;

    $pre=($page-1)<1?1:$page-1;

    return [
        'page'=>$page,
        'rows'=>$rows,
        'next'=>$next,
        'pre'=>$pre,
        'last_page'=>$last_page,
        'is_more'=>$is_more,
        'limit'=>$limit,
        'total'=>$total
    ];
}


提交评论
评论列表