`
Everyday都不同
  • 浏览: 723776 次
  • 性别: Icon_minigender_1
  • 来自: 宇宙
社区版块
存档分类
最新评论

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>

 效果如下:



 同样实现了效果,仅供参考!

 

  • 大小: 3.8 KB
  • 大小: 2.8 KB
  • 大小: 4.3 KB
0
0
分享到:
评论

相关推荐

    jQuery实现Table分页跳转

    jQuery分页的基本思想是通过JavaScript动态加载或隐藏Table中的数据行,以实现分页显示。通常会结合后端接口获取数据,根据每页显示的数据量来划分页码,用户点击页码时,发送请求获取对应页的数据,并更新Table内容...

    jquery前端实现分页效果

    本主题将深入探讨如何使用jQuery在前端实现简单的分页效果,尤其适用于数据量不大的场景。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。在前端实现分页,jQuery...

    jquery实现前台分页

    本知识点主要讲解如何使用jQuery实现前台分页,这是一种无需服务器端处理,完全在客户端进行的数据分页技术。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在...

    jQuery实现分页插件

    jQuery分页插件通过计算总数据量和每页显示的数量来确定页码总数,并根据当前页数展示对应的数据。 ### 2. 插件设计 一个好的jQuery分页插件应具备以下特性: - **自定义配置**:允许开发者设置每页显示的条目数...

    jquery实现分页组件

    **jQuery实现分页组件** 在Web开发中,分页是一种常见的功能,用于处理大量数据时,将内容分段展示,提高用户体验。jQuery是一款强大的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务,同时也方便我们...

    jQuery分页插件设置分页内容显示数量的分页代码

    通过这种方式,我们可以轻松地实现jQuery分页插件的分页功能,并灵活控制每页显示的内容数量。值得注意的是,这只是一个基础的示例,实际应用中可能还需要考虑其他因素,如数据的异步加载、动态计算总页数、自定义...

    jquery实现数据分页显示

    **一、jQuery分页基础** jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画效果。在实现分页功能时,jQuery可以帮助我们轻松地选择元素、添加交互以及动态更新内容。 1. **HTML结构** 在开始之前...

    jquery animate分页按钮.zip

    在分页按钮的应用中,我们利用Animate来控制按钮的展开与收缩,即当鼠标悬停在分页按钮上时,按钮会滑动展开,显示更多的分页选项;当鼠标离开时,按钮则会自动收缩回原始状态。 具体实现这个效果,我们需要编写...

    jQuery图片分页切换特效.zip

    "jQuery图片分页切换特效"就是这样一种技术,它将传统的静态图片展示转化为富有动感的分页切换效果,使得用户在浏览过程中能够更加直观、便捷地查看多张图片。这一特效是基于JavaScript库jQuery实现的,具有轻量级、...

    jquery java struts2 实现分页 非常好看的分页

    在这个例子中,你需要在`&lt;head&gt;`部分引入`jquery.min.js`和`jquery.pagination.js`,并在`&lt;body&gt;`部分设置分页容器,如一个具有特定ID的`&lt;div&gt;`元素。同时,你需要在CSS(`jquerypage.css`)中定义分页组件的样式,...

    jquery实现分页插件

    jQuery分页插件的工作原理是通过对HTML页面中的数据进行动态加载,只显示当前页的数据,用户可以通过点击页码或导航按钮切换不同的页面。这种技术避免了一次性加载大量数据导致的页面加载慢的问题,同时也提高了用户...

    jQuery分页demo实现

    在网页开发中,分页是一种常见的功能,...通过以上步骤,你可以实现一个基本的jQuery分页DEMO。在实践中,可能还需要考虑更多细节,如分页参数的持久化、错误处理等。不断学习和实践,将使你在Web开发中更加得心应手。

    jquery分页插件结合jsp实例

    `jPagination`是一款流行且易于使用的jQuery分页插件,它提供了多种自定义选项,如每页显示的记录数、样式、回调函数等,帮助开发者快速实现分页功能。在项目中引入jPagination,你需要下载该插件的JS文件,并将其...

    基于 jQuery 实现的 Ajax 异步分页

    本篇文章将详细介绍如何利用jQuery实现Ajax异步分页,以及其背后的原理和实践应用。 首先,让我们理解什么是Ajax。AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下更新部分网页内容...

    jQuery Ajax分页插件(jquery.pagination)

    ### jQuery分页插件的基本概念 1. **Ajax**:异步JavaScript和XML,允许页面与服务器进行通信,更新部分页面内容而无需完全刷新页面。这为分页提供了便利,因为只需要获取新页面的数据,而不是整个页面。 2. **...

    jQuery通过分页加载图片列表代码.zip

    在这个“jQuery通过分页加载图片列表代码”示例中,开发者利用jQuery的功能实现了图片列表的分页加载,这在处理大量图片时非常有用,可以减少页面加载时间并提高用户体验。 首先,我们需要理解分页的基本概念。分页...

    MVC 分页 JQuery Pager

    **三、MVC中的分页实现** 1. **模型(Model)**: 在MVC中,模型通常是数据库操作的封装。我们可以创建一个服务或仓库类,提供获取分页数据的方法。例如,一个`GetPagedData(int pageIndex, int pageSize)`方法,...

    jQuery分页按钮控制动态的加载图片列表.zip

    &lt;link rel="stylesheet" href="css/style.css?3.1.64"&gt; [removed][removed] &lt;/head&gt; ...&lt;div class="piclist"&gt; ...&lt;div class="fydiv"&gt; ...&lt;/div&gt; ... jQuery的分页按钮控制动态加载图片列表代码

    基于jQuery可控制内容数量的分页代码

    4. `jquery.pagination.js`:这是一个jQuery分页插件,实现了动态生成分页链接和控制内容显示的功能。你可以通过配置参数来自定义分页行为,如每页显示的内容数量、总页数等。 5. `说明read me.txt`:这是对整个...

    Jquery easyUI分页实现

    在本篇文章中,我们将探讨“jQuery EasyUI分页实现”的相关知识点,这在处理大量数据展示时尤其重要,因为它能够帮助用户以更易管理的方式浏览信息。 1. **jQuery EasyUI简介** jQuery EasyUI 是一套基于jQuery的...

Global site tag (gtag.js) - Google Analytics