欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-28 14:13:44
...

现在有多个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页:


jQuery实现“分页”的效果,控制div分页显示
            
    
    博客分类: jQuery jquerydiv分页 
 第3页:


jQuery实现“分页”的效果,控制div分页显示
            
    
    博客分类: jQuery jquerydiv分页 
 

这个太过“原始”了,用了下网上比较推荐的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>

 效果如下:


jQuery实现“分页”的效果,控制div分页显示
            
    
    博客分类: jQuery jquerydiv分页 
 同样实现了效果,仅供参考!

 

  • jQuery实现“分页”的效果,控制div分页显示
            
    
    博客分类: jQuery jquerydiv分页 
  • 大小: 3.8 KB
  • jQuery实现“分页”的效果,控制div分页显示
            
    
    博客分类: jQuery jquerydiv分页 
  • 大小: 2.8 KB
  • jQuery实现“分页”的效果,控制div分页显示
            
    
    博客分类: jQuery jquerydiv分页 
  • 大小: 4.3 KB
相关标签: jquery div 分页