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

最新推荐文章于 2023-08-28 16:04:58 发布
最新推荐文章于 2023-08-28 16:04:58 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： jQuery 文章标签： jquery div 分页 ViewUI

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

 效果如下：



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

 

z2012c
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java结合html，css实现内容的酷炫分页（1）
qq_35750547的博客
05-23 2351
当你网站的东西较多的时候，除了使用加载之外，还有一个方法就是将内容分页。以本博客为例，该篇讲述如何用Java结合html，css实现分页。1.实现的效果图如下所示1）.当当前页面为第一页时，效果如图所示2）.当当前页面不为第一页，也不为最后一页时，效果如下3）.当当前页面为最后一页时，效果如图所示2.效果是由代码来实现的，接下来就来对以上效果所用java代码进行展示和分析&lt;div class...
HTML实现分页功能
热门推荐
weixin_45607635的博客
12-07 2万+
思路 主要是通过display: block和display: none来实现页面的切换。 将每个页面用一个div包起来，默认第一个页面的样式是display: block，其他页面的样式是display: none，然后通过JavaScript获取鼠标点击事件来隐藏其他页面，显示当前页面，达到页面切换的目的。 效果 具体实现 创建项目 首先创建一个项目，我的项目的目录结构大致如下图所示。 .html文件 篇幅问题，这里就只详细放page部分的第一个页面的两个条目的代码作为例子了。 <!DOCTY
js方法的封装
09-04 341
封装是为了更好的调用，当我们很多页面都需要同一种方法的时候，为了避免每个页面都需要进行重写方法，增加工作量，这个时候就需要我们对部分公共的方法进行封装，这样便于更好的进行调用 我在写接口的时候用到了 挺多方法，可能以后会需要进行重复使用，我就对代码进行了整改，把部分方法进行了封装，现在就来说说怎么封装和调用的 1.在写的方法中找到需要封装的部分 2.重建一个js文件，名字自己取，并...
vue3将子组件中的内容进行a4分页展示
最新发布
qq_52232736的博客
08-28 485
在我们写一些关于文档类的项目时，想要将所写的内容以文档的A4分页形式进行展示，这个时候我们可以采取操作虚拟dom的形式，对文档进行展示。
jQuery页面突出显示效果
qq_42815580的博客
03-12 151
实现效果 使用语法 hover（[over],out） over：鼠标移到元素上要触发的函数（mouseenter） out：鼠标移出元素要触发的函数（mouseleave） fadeTo([速度]，透明度，[切换效果]，[回调函数]) 动画队列 • 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行 • 停止排队 stop( )用于停止动画或效果，写在动画或效果的前面，相当于停止结束上一次的动画，每次使用动画之前，先调用 stop() ,再调用动画。 代码展示 HTML结构
jquery实现的分页显示功能示例
10-16
总的来说，这个示例展示了如何使用jQuery和AJAX实现分页显示功能，包括数据的获取、页面元素的动态生成以及与用户的交互。在实际应用中，可能还需要考虑错误处理、加载状态显示、优化性能（如使用局部刷新而非每次...
jQuery实现的分页功能示例
12-29
本文实例讲述了jQuery实现的分页功能。分享给大家供大家参考，具体如下： 1、分页栏HTML码 <div class=g-cf> <div xss=removed class=g-pager> </div> </div> 2、CSS样式文件 .g-cf:after {clear: both;content...
jQuery实现伪分页的方法分享
12-28
本文实例讲述了jQuery实现伪分页的方法。...在数据加载完成后便可以对table数据进行伪分页、注意div引用的class,我填充的数据是四列的，所以td里加了colspan，div是分页显示区域 <td colspan
jquery.pager.js实现分页效果
01-19
本文实例为大家分享了jquery.pager.js实现分页的具体代码，供大家参考，具体内容如下 1.html <link href=/stylesheets/Pager.css rel=stylesheet type=text/css/> [removed][removed] <body> <div id...
jquery前端实现分页效果
05-21
javaweb项目，jquery前段实现分页效果，针对数据量不是很大时使用。
Jquery多DIV列表 展开 关闭.
05-07
Jquery多DIV列表 展开 关闭. 分页中多个列表，根上展开，关闭按钮功能
使用jQuery实现简单的组件化
FKDXHS的博客
12-19 6330
使用jQuery实现简单的分页效果 原理剖析：使用AJAX读取HTML模板文件返回模板内容
jQuery实现简单分页
农夫旁有山泉的博客
02-02 2万+
现在项目分页好多都是直接用插件，今天发现其实自己写页不难。主要是以前老师讲的时候没听。（对不起老何！哈哈） 今天发布一个前端超简单的分页效果,纯jQ！废话不多说，上代码。要是你们需要，直接复制过去就可以，我故意把css，js，放在一起就是为了方便copy。。注意jq版本1.7以上 最简单的分页 ul.pagination { display: inline-block;
Jquery实现div分页显示silder
志超的专栏
08-04 2815
效果如图，点击左边的链接，相应的内容显示在右侧，可能大家觉得这不简单，实际上我的这个是所有的内容全部放在一个网页文件中，各个内容分别放在不同的DIV中。 实现其实很简单，左侧的栏目代码 系统简介 用户登录 注意事项 个人备课簿 个人工作室 >个人信息管理 >个
基于jquery实现的分页组件
weixin_40099824的博客
09-29 7945
  分页组件现在在网页中的应用已经变得十分普遍，像我平时经常会去的淘宝和爱奇艺都有用到。   分页的主要用处呢，就是可以分页面去请求数据，不然你像淘宝每个分类有成千上万个商品和店铺，全部请求过来再展示给你的话，那个加载时间可能会让等待的你要自闭了。（不过我算是萌新，如果淘宝不是分页请求的而是其它的方法，那么我自闭了。）   所以这个组件的基本功能或者说要实现的效果大概就是这几个了： 根据选择...
jQuery实现的分页小案例
柳宁依的博客
07-16 4638
网上有很多分页小插件，实现原理大概心里是知道的，但实际操作起来不知如何，自己就写了一个小案例实现了一下分页功能。因为是简单的练手，并没有用ajax请求数据，直接用了数组存储数据，数组存储了25条信息。这只是一个简单的小案例，并没有将其封装成插件。html文本很简单，ul标签里面是要展示的列表，下面的div盒子装着页码。&lt;ul class="list"&gt; &lt;/ul&gt; &lt;...
jquery实现分页功能
05-18
要使用jQuery实现分页功能，需要先获取到要分页的数据，然后根据每页显示的数量和总数据量计算出需要分成多少页。然后在页面上生成相应的分页导航，当用户点击不同的分页按钮时，再用jQuery动态地显示相应的数据。 以下是一个简单的示例代码： HTML部分： ``` <div id="data"></div> <div id="pagination"></div> ``` JS部分： ``` // 模拟数据 var data = []; for (var i = 1; i <= 50; i++) { data.push("数据" + i); } // 每页显示的数量 var pageSize = 10; // 总页数 var pageCount = Math.ceil(data.length / pageSize); // 显示数据的函数 function showData(pageIndex) { var html = ""; for (var i = (pageIndex - 1) * pageSize; i < pageIndex * pageSize && i < data.length; i++) { html += "<p>" + data[i] + "</p>"; } $("#data").html(html); } // 生成分页导航的函数 function generatePagination() { var html = ""; for (var i = 1; i <= pageCount; i++) { html += "<span data-page='" + i + "'>" + i + "</span>"; } $("#pagination").html(html); } // 默认显示第一页的数据 showData(1); // 生成分页导航 generatePagination(); // 点击分页导航时显示相应的数据 $("#pagination").on("click", "span", function() { var pageIndex = parseInt($(this).data("page")); showData(pageIndex); }); ``` 在上面的示例代码中，我们首先定义了一个模拟数据，然后根据每页显示的数量和总数据量计算出总页数。接着定义了两个函数，一个用于显示数据，一个用于生成分页导航。然后在页面加载完成后，先显示第一页的数据，再生成分页导航。最后监听分页导航的点击事件，在点击时根据点击的页码显示相应的数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值