现在有多个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>
效果如下:
同样实现了效果,仅供参考!
相关推荐
jQuery分页的基本思想是通过JavaScript动态加载或隐藏Table中的数据行,以实现分页显示。通常会结合后端接口获取数据,根据每页显示的数据量来划分页码,用户点击页码时,发送请求获取对应页的数据,并更新Table内容...
本主题将深入探讨如何使用jQuery在前端实现简单的分页效果,尤其适用于数据量不大的场景。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。在前端实现分页,jQuery...
本知识点主要讲解如何使用jQuery实现前台分页,这是一种无需服务器端处理,完全在客户端进行的数据分页技术。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在...
jQuery分页插件通过计算总数据量和每页显示的数量来确定页码总数,并根据当前页数展示对应的数据。 ### 2. 插件设计 一个好的jQuery分页插件应具备以下特性: - **自定义配置**:允许开发者设置每页显示的条目数...
**jQuery实现分页组件** 在Web开发中,分页是一种常见的功能,用于处理大量数据时,将内容分段展示,提高用户体验。jQuery是一款强大的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务,同时也方便我们...
通过这种方式,我们可以轻松地实现jQuery分页插件的分页功能,并灵活控制每页显示的内容数量。值得注意的是,这只是一个基础的示例,实际应用中可能还需要考虑其他因素,如数据的异步加载、动态计算总页数、自定义...
**一、jQuery分页基础** jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画效果。在实现分页功能时,jQuery可以帮助我们轻松地选择元素、添加交互以及动态更新内容。 1. **HTML结构** 在开始之前...
在分页按钮的应用中,我们利用Animate来控制按钮的展开与收缩,即当鼠标悬停在分页按钮上时,按钮会滑动展开,显示更多的分页选项;当鼠标离开时,按钮则会自动收缩回原始状态。 具体实现这个效果,我们需要编写...
"jQuery图片分页切换特效"就是这样一种技术,它将传统的静态图片展示转化为富有动感的分页切换效果,使得用户在浏览过程中能够更加直观、便捷地查看多张图片。这一特效是基于JavaScript库jQuery实现的,具有轻量级、...
在这个例子中,你需要在`<head>`部分引入`jquery.min.js`和`jquery.pagination.js`,并在`<body>`部分设置分页容器,如一个具有特定ID的`<div>`元素。同时,你需要在CSS(`jquerypage.css`)中定义分页组件的样式,...
jQuery分页插件的工作原理是通过对HTML页面中的数据进行动态加载,只显示当前页的数据,用户可以通过点击页码或导航按钮切换不同的页面。这种技术避免了一次性加载大量数据导致的页面加载慢的问题,同时也提高了用户...
在网页开发中,分页是一种常见的功能,...通过以上步骤,你可以实现一个基本的jQuery分页DEMO。在实践中,可能还需要考虑更多细节,如分页参数的持久化、错误处理等。不断学习和实践,将使你在Web开发中更加得心应手。
`jPagination`是一款流行且易于使用的jQuery分页插件,它提供了多种自定义选项,如每页显示的记录数、样式、回调函数等,帮助开发者快速实现分页功能。在项目中引入jPagination,你需要下载该插件的JS文件,并将其...
本篇文章将详细介绍如何利用jQuery实现Ajax异步分页,以及其背后的原理和实践应用。 首先,让我们理解什么是Ajax。AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下更新部分网页内容...
### jQuery分页插件的基本概念 1. **Ajax**:异步JavaScript和XML,允许页面与服务器进行通信,更新部分页面内容而无需完全刷新页面。这为分页提供了便利,因为只需要获取新页面的数据,而不是整个页面。 2. **...
在这个“jQuery通过分页加载图片列表代码”示例中,开发者利用jQuery的功能实现了图片列表的分页加载,这在处理大量图片时非常有用,可以减少页面加载时间并提高用户体验。 首先,我们需要理解分页的基本概念。分页...
**三、MVC中的分页实现** 1. **模型(Model)**: 在MVC中,模型通常是数据库操作的封装。我们可以创建一个服务或仓库类,提供获取分页数据的方法。例如,一个`GetPagedData(int pageIndex, int pageSize)`方法,...
<link rel="stylesheet" href="css/style.css?3.1.64"> [removed][removed] </head> ...<div class="piclist"> ...<div class="fydiv"> ...</div> ... jQuery的分页按钮控制动态加载图片列表代码
4. `jquery.pagination.js`:这是一个jQuery分页插件,实现了动态生成分页链接和控制内容显示的功能。你可以通过配置参数来自定义分页行为,如每页显示的内容数量、总页数等。 5. `说明read me.txt`:这是对整个...
在本篇文章中,我们将探讨“jQuery EasyUI分页实现”的相关知识点,这在处理大量数据展示时尤其重要,因为它能够帮助用户以更易管理的方式浏览信息。 1. **jQuery EasyUI简介** jQuery EasyUI 是一套基于jQuery的...