jQuery实现“分页”的效果，控制div分页显示

Everyday都不同

浏览: 722662 次
性别:
来自: 宇宙

最近访客更多访客>>

gaoshaoye

hbzyb

loginboot

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jquery div 分页

现在有多个div，如果完全显示在一个页面里，显得太臃肿。故而需要分页，下面是我用jquery控制每页显示个数的代码，仅供参考测试！

页面布局：

<body>
        <div class="container">
            <div class="box" name="box">aaaaaa1</div> 
            <div class="box" name="box">aaaaaa2</div>  
            <div class="box" name="box">aaaaaa3</div>  
            <div class="box" name="box">aaaaaa4</div>  
            <div class="box" name="box">aaaaaa5</div>  
            <div class="box" name="box">aaaaaa6</div> 
            <div class="box" name="box">aaaaaa7</div> 
            <div class="box" name="box">aaaaaa8</div>  
            <div class="box" name="box">aaaaaa9</div>  
            <div class="box" name="box">aaaaaa10</div>  
            <div class="box" name="box">aaaaaa11</div>  
            <div class="box" name="box">aaaaaa12</div>
            <div class="box" name="box">aaaaaa13</div> 
            <div class="box" name="box">aaaaaa14</div>  
            <div class="box" name="box">aaaaaa15</div>  
            <div class="box" name="box">aaaaaa16</div>  
            <div class="box" name="box">aaaaaa17</div>  
            <div class="box" name="box">aaaaaa18</div> 
        </div>
        <div id="pages"></div>
       
    </body>

下面是控制分页显示的js：

<script>
        var $div = $(".container");
        var $show = $("#show");
        var $pages = $("#pages");
        var pgindex = 1;//当前页
        var eachCnt = 8;//每页显示个数
        var boxes = $("div[name='box']");
        var cnt = boxes.length;
        var indexs = new Array(cnt);
        for(var i=0; i<cnt; i++) {
            indexs[i] = i;
        }
         var allPages = Math.ceil(cnt/eachCnt);
        $(function() {
           $pages.html("total " + allPages + " pages");
           showPage(1);
            for(var i=0; i<allPages; i++) {
                $pages.append("<a href=\"javascript:showPage('"+ (i+1) +"');\"> "+ (i+1) +" </a>");
            }
            $pages.append("<a href=\"javascript:gotopage(-1);\">prev</a> <a href=\"javascript:gotopage(1);\">next</a>"); 
            
        });
        
       function gotopage(value){ 
            try{ 
             value=="-1"?showPage(pgindex-1):showPage(pgindex+1); 
             }catch(e){ 
              
             } 
            } 
      function showPage(pageIndex) 
          { 
          if(pageIndex== 0 || pageIndex==(allPages+1)) {
              return;
          }
            var start = (pageIndex-1)*8;//8
            //alert("start:" + start);
            var end = start + 8;
            end = end > cnt ? cnt : end;//16
            //alert("end:" + end);
            var subIndexs = indexs.slice(start, end);
            for(var i=0; i<cnt; i++) {
               if(contains(i, subIndexs)) {
                   boxes.eq(i).show();
               }else{
                   boxes.eq(i).hide();
               }
            }
            pgindex = pageIndex;
          }
        
        var contains = function (element, arr) { 
  
            for (var i = 0; i < arr.length; i++) { 
                if (arr[i] == element) { 
                    return true; 
                } 
            } 
            return false; 
        } 
        
        //alert(contains(23, indexs));
    </script>

分页效果如下：

第1页：

第3页：

这个太过“原始”了，用了下网上比较推荐的jquery.page.js插件改善了下：

 <script>
        var $div = $(".container");
        //alert($("#pager").html());
        var $show = $("#show");
        var $pages = $("#pages");
        var pgindex = 0;//初始当前页
        var eachCnt = 8;
        //var cnt = $("div", ".container").length;
        //var boxes = $div.find("div");
        var boxes = $("div[name='box']");
        //var box = boxes.eq(0);
        //alert(boxes.eq(0));
        //box.hide();
        var cnt = boxes.length;
        //var box = boxes[0];
        //alert(cnt);
        var indexs = new Array(cnt);
        for(var i=0; i<cnt; i++) {
            indexs[i] = i;
        }
         var allPages = Math.ceil(cnt/eachCnt);
        //alert(allPages);
        $(function() {
           
          showPage(0);
            
            
        });
         $("#Pagination").pagination(cnt, {
                    callback: pageselectCallback,//PageCallback() 为翻页调用次函数。
                    prev_text: " 上一页",
                    next_text: "下一页 ",
                    items_per_page: 8, //每页的数据个数
                    num_display_entries: 3, //两侧首尾分页条目数
                    current_page: pgindex,   //当前页码
                    num_edge_entries: 2, //连续分页主体部分分页条目数
                    //link_to:"?page=__id__"
          });
        //点击翻页时回调的函数
        function pageselectCallback(pageIndex, jq) {
            alert("haha");
            showPage(pageIndex);
        }
        
      function showPage(pageIndex) 
          { 
            var start = pageIndex*8;//8
            //alert("start:" + start);
            var end = start + 8;
            end = end > cnt ? cnt : end;//16
            //alert("end:" + end);
            var subIndexs = indexs.slice(start, end);
            for(var i=0; i<cnt; i++) {
               if(contains(i, subIndexs)) {
                   boxes.eq(i).show();
               }else{
                   boxes.eq(i).hide();
               }
            }
            //pgindex = pageIndex;
          }
        
        var contains = function (element, arr) { 
  
            for (var i = 0; i < arr.length; i++) { 
                if (arr[i] == element) { 
                    return true; 
                } 
            } 
            return false; 
        } 
        
        //alert(contains(23, indexs));
    </script>

效果如下：

同样实现了效果，仅供参考！