js实现分页

最新推荐文章于 2021-02-05 16:58:43 发布

岩~

最新推荐文章于 2021-02-05 16:58:43 发布

阅读量935

点赞数 1

分类专栏： javascript 文章标签： js 分页 js

本文链接：https://blog.csdn.net/ZHUBOYAN123/article/details/22796895

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html>
<head>
<style>
#page {
    margin: 4px 10px 4px 4px;
    float: left;
    padding: 4px;
    #background-color:#D4E8F1;
}
#page a {
    border: 1px solid #10CE75;
    color: #000000;
    font-weight: bold;
    margin: 1px;
    padding: 3px 8px;
    width: 30px;
}
#page a.current{background-color:#D0E9EE;}
</style>
<script src="./tmp/jquery-1.7.1.min.js"></script>
<script>
/**
调用page({p:4,p_num:100,count:500,per_page:20});
count:记录总数
p_num:共有多少页数
p:当前页号
per_page:每页展示个数
*/
function page2($page){
        var pagination = '',
        pageButtonCount = 6,//分页按钮个数
        per_page=$page.per_page;//单页记录
        if (parseInt($page.count)>per_page){
            if(parseInt($page.p) > 1){
                pagination += '<a class="ilooked" p=1>首页</a>';
                var prev = $page.p-1;
                if(prev>0)
                    pagination += '<a class="ilooked" p='+prev+'>上一页</a>';
            }
            if(parseInt($page.p_num) > 1){
                if($page.p_num <= pageButtonCount){
                    for(var i=1;i<$page.p_num+1;i++){
                        pagination += '<a class="ilooked '+(($page.p == i)?"current":"")+'" p='+i+'>第'+i+'页</a>';
                    }
                }else{
                    var Num = Math.ceil(pageButtonCount/2);
                    if($page.p == 1 || $page.p == $page.p_num){
                        //第一页,末页
                        for(var i=1;i<Num;i++){
                            pagination += '<a class="ilooked '+(($page.p == i)?"current":"")+'" p='+i+'>第'+i+'页</a>';
                        }
                        pagination += '<a href="javascript:void(0);">...</a>';
                        for(i=$page.p_num-Num;i<$page.p_num+1;i++){
                            pagination += '<a class="ilooked '+(($page.p == i)?"current":"")+'" p='+i+'>第'+i+'页</a>';
                        }
                    }else{
                            if($page.p-1>Num){
                                pagination += '<a class="ilooked" p=1>第1页</a>';
                                pagination += '<a href="javascript:void(0);">...</a>';
                                var left_right_count = Math.ceil((pageButtonCount-2)/2);
                                for(var i=$page.p-left_right_count;i<$page.p;i++){
                                    if(i>0)
                                        pagination += '<a class="ilooked" p='+i+'>第'+i+'页</a>';
                                }
                                pagination += '<a class="ilooked current" p='+$page.p+'>第'+$page.p+'页</a>';
                                for(i=$page.p+1;left_right_count>0;i++,left_right_count--){
                                    pagination += '<a class="ilooked" p='+i+'>第'+i+'页</a>';
                                }
                               if(i-1<$page.p_num){
                                   if(i<$page.p_num)
                                       pagination += '<a href="javascript:void(0);">...</a>';
                                    pagination += '<a class="ilooked" p='+$page.p_num+'>第'+$page.p_num+'页</a>';
                               }

                            }else{
                               for(var i=1;i<$page.p+1;i++){
                                        pagination += '<a class="ilooked '+(($page.p == i)?"current":"")+'" p='+i+'>第'+i+'页</a>';
                                }
                               pagination += '<a href="javascript:void(0);">...</a>';
                                pagination += '<a class="ilooked" p='+$page.p_num+'>第'+$page.p_num+'页</a>';
                            }
                    }
                }
            }
            if(parseInt($page.p) < parseInt($page.p_num)){
                var next = $page.p+1;
                pagination += '<a class="ilooked" p='+next+'>下一页</a>';
            }
              $("#page").html(pagination);

            }//if1
        }//end page
</script>
</head>

<body>

直接上代码