翻页按钮的完整实现（适配手机）

最新推荐文章于 2024-03-17 16:19:09 发布
七月的岁月童话
最新推荐文章于 2024-03-17 16:19:09 发布
阅读量859
点赞数 1
分类专栏： demo 文章标签：翻页按钮适配手机
本文链接：https://blog.csdn.net/zqwqiao/article/details/50657865
版权
demo 专栏收录该内容
7 篇文章 0 订阅
订阅专栏
注释我已经写得很想写了，应该都可以看懂，翻页实现的效果很好，还做了手机适配处理
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<title>pagebar</title>
<style type="text/css">
    body,div,ul,li{
        margin:0;
        padding:0;
        font:14px/1.42857 'Microsoft YaHei','微软雅黑',Arial,'Helvetica Neue','Myriad Pro', 'Hiragino Sans GB',  'WenQuanYi Micro Hei', sans-serif;
    }
    .page_bar{
        text-align:center;
    }
    .page_bar>ul{
        display:inline-block;
        margin: 20px 0;
    }
    .page_bar li{
        list-style:none;
        background-color: #fff;
        border: 1px solid #ddd;
        color: #337ab7;
        float: left;
        display: inline;
        margin-left: -1px;
        padding: 6px 12px;
        position: relative;
        text-decoration: none;
        cursor:pointer;
    }
    .page_bar .active{
        background-color: #337ab7;
        border-color: #337ab7;
        color: #fff;
        cursor: default;
        z-index: 2;
    }
    .page_bar .disabled{
        color: #777;
        cursor: not-allowed;
        background-color: #fff;
        border-color: #ddd;
    }
    .page_bar li:last-child{
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
    }
    .page_bar li:first-child{
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px;
    }
</style>
</head>
<body>
    <div id="page_bar" class="page_bar"></div> <!--翻页按钮-->
    <script>
        var page_bar_num =10;//bar按钮的个数
        var page = 1;//当前页
        var max_page = 25;//最大页
        $(function(){
            list(max_page,page);
        });
        $('#page_bar').on('click','#first',function(){//首页按钮触发
            if(page<=1){
                return ;
            }
            page = 1;
            list(max_page,page);
            }
        );
        $('#page_bar').on('click','#last',function(){//末页按钮触发
            if(page>=max_page){
                return ;
            }
            page = max_page;
            list(max_page,page);
            }
        );
        $('#page_bar').on('click','#prev',function(){//前一页按钮触发
            if(page <= 1){
                return;
            }
            page -= 1;
            list(max_page,page);
            }
        );
        $('#page_bar').on('click','#next',function(){//后一页按钮触发
            if(page >= max_page){
                return;    
            }
            page += 1;
            list(max_page,page);
            }
        );
        $('#page_bar').on('click','.numbtn',function(){//数字按钮触发
            page = $(this).find('span').html();//找到数字按钮中的数据
            page = page - -0;//避免点击下一页时+ 当做字符连接 如3的下一页加成了31说 转换成整型
            list(max_page,page);
            }
        );
        function list(max_page,page){//实现page_bar 10格的函数
            if(max_page < page_bar_num){//总数目没有bar数目多时：
                page_bar_num = max_page;
            }
            var before = 0;//当下页码前面的页数
            var bef_num=Math.floor(page_bar_num/2);//Math.floor取小于其的最大整数  翻页条当前页前面的框数
            for(var i = page;i>1;i--){
                before += 1;
                if(before>(page_bar_num-1)){
                    break;    
                }
            }        
            var after = 0;//当下页码后面的页数
            var aft_num=(page_bar_num-bef_num-1);//翻页条当后页前面的框数
            for(var i = page;i<max_page;i++){
                after += 1;
                if(after >= (page_bar_num-1)){
                    break;    
                }
            }
            var arr_page = [page];//存显示出来的page数组
            if(before >=bef_num && after >= aft_num){//前后的页数都大于前后的框数
                for(var i=0;i<bef_num;i++){//取出前面的页数放到框里
                    var p = page - (i+1);
                    arr_page.push(p);
                }
                for(var i=0;i<aft_num;i++){//取出后面的页数放到框里
                    var p = page + (i+1);
                    arr_page.push(p);
                }
            }else if(before > bef_num && after < aft_num){//前面页数大于框数，后面的小于框数
                    var new_pre_num = page_bar_num - after - 1;    //前面的新框数
                    for(var i=0;i<new_pre_num;i++){            
                        var p = page - (i+1);
                        arr_page.push(p); 
                    }
                    for(var i=0;i<after;i++){
                        var p = page + (i+1);
                        arr_page.push(p);
                    }
            }else if(before < bef_num && after > aft_num){//前面页数小于框数，后面的大于框数
                        for(var i=0;i<before;i++){                
                            var p = page - (i+1);
                            arr_page.push(p);
                        }
                        for(var i=0;i<page_bar_num-before-1;i++){
                            var p = page + (i+1);
                            arr_page.push(p);
                        }
            }else{
                        for(var i=0;i<after;i++){//前后页数都小于框数
                            var p = page - (i+1);
                            arr_page.push(p);
                        }
                        for(var i=0;i<before;i++){
                            var p = page + (i+1);
                            arr_page.push(p);
                        }
                    }
            arr_page.sort(function compare(a,b){return a-b;});  //排序  function的作用就是比较两个数的大小用的,然后返回结果的正负作为排序的依据  a-b这个函数是升序排序,如果想逆序排序改成return b-a;
            var string_html_output = '';
            for(var i=0;i<arr_page.length;i++){    //把存储的页数显示出来
                if(page ==     arr_page[i]){//当前页显示active样式
                    string_html_output += '<li class="active numbtn"><span>' + arr_page[i] + '</span></li>';//当下按钮active
                }else{
                    string_html_output += '<li class="numbtn"><span>' + arr_page[i] + '</span></li>';
                }
            }                
            var fir_disabled = '';//四个按钮的可用情况
            var pre_disabled = '';
            var nex_disabled = '';
            var las_disabled = '';
            if(page <=1 ) {//不可点击
                fir_disabled = pre_disabled = 'class="disabled"';
            }
            if(page >= max_page){//不可点击
                nex_disabled = las_disabled = 'class="disabled"';
            }                
            var fir='<li ' + fir_disabled + '><span id="first"><span>首页</span></span></li>';
            var pre='<li ' + pre_disabled + '><span id="prev"><span>上一页</span></span></li>';
            var nex='<li ' + nex_disabled + '><span id="next"><span>下一页</span></span></li>';
            var las='<li ' + las_disabled + '><span id="last"><span>末页</span></span></li>';
            $('#page_bar').html('<ul>' +fir+pre+ string_html_output +nex+las+ '</ul>');//组合成完整的bar            
            var width=$(window).width();//适配手机的翻页
            if(width<=640){
                $(".numbtn").hide();
                $(".active").show();
            }
        }
    </script>
</body>
</html>


</html>