虽然一直想写篇关于javascript分页的博客，但是忍了很久都没写。因为个人觉得功能还有些不完善，而且涉及到的东西也比较多，一时又难以讲清楚。但自己又想把自己领悟到的东西写下来，不然万一以后再遇见此类情况时，又得从得再来，那就太麻烦了，所以还是决定把它记录下来。
还是先上个图吧，只看文字理论太枯燥：
也不准备一一讲解怎么做的了，基本上注释里面写得比较清楚了，大体说下需要实现的功能吧。
1.数字页的显示问题。这个是问题的核心，单击不同页时会显示离此页最近的几页出来。
2.数字页跳转。
3.数据奇偶行样式。
4.是否需要复选框选项。
5.载入数据时显示进度条
大体功能就是这些，涉及到的东西点多，图片、CSS、JSP等都有所涉及，虽然此分页框架看起来还算可以，但使用起来并不轻松，基本上得明白所有过程。而且需要根据不同的需求进行不断调整，主要JS就是一个：
function GreenPager(actionPath, params) {
///定义一全局变量,因为分页条那里会使用此变量
greenPager = {};//寄生构造模式(Parasitic Constructor Pattern)
greenPager.currentPage = 1; ///当前页号
greenPager.pageCount = 1; ///页总数量
greenPager.pageSize = 15; ///每页显示数量
//中间显示的数字页的数量
greenPager.pageAmount = 3;
greenPager.actionPath = actionPath;
///额外的参数
greenPager.params = params;
//默认不显示checkbox
greenPager.checkboxEnable = false;
greenPager.setCheckboxEnable = function(enable) {
greenPager.checkboxEnable = enable;
}
greenPager.go = function(pageNum) {
//进度条
if($("#green_pageTable").height()!=0){
$("#green_loadMaskDiv").height($("#green_pageTable").height());
$("#green_loadMaskDiv").width($("#green_pageTable").width());
}else{
$("#green_loadMaskDiv").height(340);
$("#green_loadMaskDiv").width(500);
}
if(pageNum < 1){
pageNum = 1;
}else if(pageNum >= this.pageCount){
pageNum = this.pageCount;
}
var greenPager = this;
//分页需要用到的参数及一些查询条件
var pageParams = {'currentPage':pageNum,'pageSize':this.pageSize};
//将params参数放入分页参数中一起提交
if(greenPager.params != undefined){
for(var key in greenPager.params){
pageParams[key] = greenPager.params[key];
}
}
$.ajax({
type: "get",
url: this.actionPath,
data: pageParams,
cache: false,
success: function(data){
data = jQuery.parseJSON(data);
//设置当前页数
greenPager.currentPage = pageNum;
greenPager.pageCount = data.pageCount;
/* 回调 */
greenPager.render(data);
greenPager.googlePage();
},
beforeSend: function(){
$("#green_pageTable").hide();
$("#green_loadMaskDiv").fadeIn(60);
},
complete: function(){
$("#green_loadMaskDiv").fadeOut(60);
$("#green_pageTable").show();
}
});
};
greenPager.start = function(){
this.go(this.currentPage);
};
greenPager.googlePage = function(){ //谷歌式分页 用来控制数字页及...的显示
var spanPage="";
/*----------------显示上一页-----------------*/
if(greenPager.currentPage==1){
spanPage=spanPage+"<span class='disabled'>« 上一页</span>";
}else{
spanPage=spanPage+"<a class='green_googlePageNum' hidefocus='true' href='javascript:greenPager.go("+(greenPager.currentPage-1)+")'>« 上一页</a>";
}
//只有一页
if(greenPager.pageCount==1){
spanPage=spanPage+"<span class='current'>1</span>";
}else if(greenPager.pageCount < greenPager.pageAmount){//页数小于数字显示页数
for(var i=0;i<greenPager.pageAmount;i++){
if(greenPager.currentPage==i){
spanPage=spanPage+"<span class='current'>"+i+"</span>";
}else{
spanPage=spanPage+"<a class='green_googlePageNum' hidefocus='true' href='javascript:greenPager.go("+i+")'>"+(i+1)+"</a>";
}
}
}else{
//默认始终会显示前面两页，即1,2页
for(var i=1;i<=2;i++){
if(greenPager.currentPage==i){
spanPage=spanPage+"<span class='current'>"+i+"</span>";
}else{
spanPage=spanPage+"<a class='green_googlePageNum' hidefocus='true' href='javascript:greenPager.go("+i+")'>"+i+"</a>";
}
}
/*------------------ 下面这段代码是重点 ---------------------*/
//从第3页开始显示
var page_start=3;
//至倒数第3页结束
var page_end=greenPager.pageCount-3
var v = (greenPager.currentPage - greenPager.pageAmount) > (page_start-1) ? (greenPager.currentPage - greenPager.pageAmount) : page_start;
var v1 = (greenPager.currentPage + greenPager.pageAmount) < page_end ? (greenPager.currentPage + greenPager.pageAmount):page_end;
if(greenPager.currentPage>page_start+greenPager.pageAmount){
spanPage=spanPage+"<span>...</span>"
}
for(var i=v;i<=v1;i++){
if(greenPager.currentPage==i){
spanPage=spanPage+"<span class='current'>"+i+"</span>";
}else{
spanPage=spanPage+"<a class='green_googlePageNum' hidefocus='true' href='javascript:greenPager.go("+i+")'>"+i+"</a>";
}
}
if(greenPager.currentPage<page_end-greenPager.pageAmount){
spanPage=spanPage+"<span>...</span>"
}
/*------------------- 重点代码结束--------------------------*/
//默认始终会显示最后两页
for(var i=greenPager.pageCount-2;i<=greenPager.pageCount;i++){
if(greenPager.currentPage==i){
spanPage=spanPage+"<span class='current'>"+i+"</span>";
}else{
spanPage=spanPage+"<a class='green_googlePageNum' hidefocus='true' href='javascript:greenPager.go("+i+")'>"+i+"</a>";
}
}
}
/*----------------显示下一页-----------------*/
if(greenPager.currentPage==greenPager.pageCount){
spanPage=spanPage+"<span class='disabled'>下一页 »</span>";
}else{
spanPage=spanPage+"<a class='green_googlePageNum' hidefocus='true' href='javascript:greenPager.go("+(greenPager.currentPage+1)+")'>下一页 »</a>";
}
$("#green_googlePageNum").html(spanPage);
};
greenPager.render = function(data){//组装页面数据
var pageList = '';
if(greenPager.checkboxEnable){
pageList+="<tr><th><input type='checkbox' name='selectAllCheckbox' id='selectAllCheckbox'/></th>";
for(var h in data.header){
pageList+="<th>"+data.header[h]+"</th>";
}
pageList+="</tr>";
for(var i=0;i<this.pageSize;i++){
if(i<data.items.length){
pageList=pageList+"<tr ><td style='width:50px'>"+
"<input type='checkbox' name='selectCheckbox' value='"+data.items[i].id+"' />"+"</td>";
for(var key in data.header){//注意这是header的列名
if(data.items[i][key]==undefined){
pageList+="<td> </td>";
}else{
pageList+="<td>"+data.items[i][key]+"</td>";
}
}
pageList+="</tr>";
}else{
pageList+="<tr><td> </td>";
for(var key in data.header){
pageList+="<td> </td>";
}
pageList+="</tr>";
}
}
}else{
pageList+="<tr>";
for(var h in data.header){
pageList+="<th>"+data.header[h]+"</th>";
}
pageList+="</tr>";
for(var i=0;i<this.pageSize;i++){
if(i<data.items.length){
pageList=pageList+"<tr>";
for(var key in data.header){//注意这是header的列名
if(data.items[i][key]==undefined){
pageList+="<td> </td>";
}else{
pageList+="<td>"+data.items[i][key]+"</td>";
}
}
pageList+="</tr>";
}else{
pageList+="<tr>";
for(var key in data.header){
pageList+="<td> </td>";
}
pageList+="</tr>";
}
}
}
$("#green_pageTable").html(pageList);
//设置checkbox全部选中
$("#selectAllCheckbox").click(function(){
if($("#selectAllCheckbox").attr("checked")){
$("input[name='selectCheckbox']").attr("checked",true);
}else{
$("input[name='selectCheckbox']").attr("checked",false);
}
});
/*---------- 颜色交替显示 ----------*/
$("#green_pageTable tr:odd").each(function(){
// $(this).addClass("trodd");
$(this).children("td").each(function(){
$(this).addClass("trodd");
})
});
$("#green_pageTable tr:even").each(function(){
// $(this).addClass("treven");
$(this).children("td").each(function(){
$(this).addClass("treven");
})
});
/*---------- 跳转数字页事件处理 ----------*/
$('#numPage').keypress(function(event) {
if (event.which && (event.which < 48 || event.which > 57)&&event.which>9) {
event.preventDefault();
}
});
$("#numPage").keyup(function(event) {
if(event.which == 13){//回车提交
pager.go($('#numPage').val());
}
});
$("#pageButton").click(function(){
if($("#numPage").val()==""){
alert("请输入需要跳转的页！");
$("#numPage").focus();
return;
}
pager.go($('#numPage').val());
});
}; //render end
return greenPager;
}
这个JS相对来说有点复杂，但没办法，以本人的功底只能实现个这样的东西，render方法会负责渲染整个表格页面的数据内容，因此每个分页时都要手动调整。
值得注意的是，附件项目还使用一个叫logback的日志组件，这个组件会将相应的日志存入数据库内，所以需要连接数据库，而那样的话，会在相应的数据库插入几张日志表，这个功能会分页没有任何关系，如果不需要，可直接将logback.xml删除。
- 大小: 7.4 KB
分享到：
相关推荐
这个项目的实践价值在于提供了一个基础的JavaScript分页实现，可以帮助开发者更好地理解和应用分页技术。 总之，JavaScript分页是一个涉及数据处理、DOM操作、事件处理和样式设计等多个方面的问题。通过这个项目，...
三、JavaScript分页实现步骤 1. 创建HTML结构：包括页码显示区域和导航按钮。 2. 初始化分页：根据总记录数和每页显示数量计算总页数，并显示第一页。 3. 监听事件：为导航按钮添加事件监听器，当用户点击时更新...
以下是对这个通用JavaScript分页实现的详细解析： 1. **变量定义**： - `totalNum`：总记录数，表示数据源中的条目总数。 - `maxNum`：每页显示的最大记录数，即每一页可以显示多少条数据。 - `pageUrl`：分页...
通过以上分析，我们可以看到JavaScript分页实现的关键在于对数据集的分割、DOM元素的动态控制以及页码导航的生成。掌握这些技巧，将有助于开发者在Web项目中更好地管理数据展示，提升用户体验。在未来的学习和实践中...
二、JavaScript分页实现 1. 数据获取：通常，服务器会提供接口，返回当前页的数据。JavaScript通过Ajax（异步JavaScript和XML）技术与服务器进行通信，获取所需数据。 2. 分页逻辑：JavaScript需要计算总页数，这...
二、基本的JavaScript分页实现 1. 创建HTML结构：构建分页的HTML元素，通常包括页码列表、上一页/下一页按钮等。 ```html 上一页 <span id="currentPage">1 下一页 <ul id="pageNumbers"></ul> ``` 2. ...
在实际应用中，JavaScript分页可以结合前端框架和库来简化实现，例如使用jQuery的`paginate`插件，React的`react-paginate`，Vue的`vue-paginate`等。这些库通常提供了丰富的配置项和预定义的样式，使分页功能更易于...
**JavaScript分页实现**，通常涉及到以下步骤： 1. **初始化**：设置每页显示的条目数、总数据量等参数。 2. **创建分页元素**：在HTML中添加页码和导航按钮。 3. **绑定事件**：为分页元素添加点击事件监听器。 4. ...
理解以上关键点，你就能实现一个基本的JavaScript分页模块。对于`Cls_jsPage.js`，需要查看其源代码了解具体的实现细节，如分页类的构造、方法以及如何与页面元素交互。在实际项目中，根据需求进行定制和优化，如...
二、JavaScript分页实现 1. HTML结构：首先，我们需要创建一个包含页码的HTML结构，通常包括上一页、下一页、页码列表和跳转至页码的输入框。 2. JavaScript变量：存储总条数、每页显示条数、当前页等信息。 3. 计算...
下面将详细介绍几种常见的JavaScript分页实现方式。 1. 基于DOM操作的简单分页 最基础的分页方法是通过JavaScript直接操作DOM元素来实现。首先，计算出总页数，然后根据当前页码动态创建或更新页面上的链接。用户...
2. **JavaScript分页实现思路** - **数据处理**：首先，需要对服务器获取到的数据进行处理，根据每页的显示数量切分成多个数组片段。 - **DOM操作**：创建分页组件的HTML结构，包括页码按钮和导航元素。 - **事件...
这个“一个非常精巧的javascript实现的Bootstrap分页插件”提供了无需依赖其他第三方类库的解决方案，使得开发者能够更轻松地在项目中集成分页功能。 首先，我们要理解什么是Bootstrap。Bootstrap是由Twitter推出的...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它...这个压缩包提供了一系列的JavaScript分页代码，无论你是新手还是经验丰富的开发者，都可以从中受益，学习如何在自己的网站上实现强大且高效的分页功能。
3. **JavaScript分页实现** - 使用JavaScript，可以监听用户的分页操作（如点击页码），然后更新DOM结构显示新的数据。 - 常用的分页算法有计算总页数、获取当前页数据等。 - 可以结合Ajax异步请求，获取服务器上...
JavaScript分页是网页开发中的一个常见功能，它用于在大量数据中进行页面间导航，以提高用户体验并优化页面加载速度。...希望这个案例能帮助你开启这段学习之旅，不断探索和优化你的JavaScript分页实现。
"10经典常用的js分页代码(开发必备)"这个资源集合了十个在实际开发中广泛使用的JavaScript分页实现方案。 1. **基础概念**：分页通常涉及到数据的动态加载，通过将大量数据分成若干页，每次只显示一部分，用户可以...
三、经典JavaScript分页实现 一个简单的JavaScript分页实现通常包括HTML结构、CSS样式和JavaScript逻辑三部分。以下是一个基础的分页代码示例： ```html <div id="pagination"></div> // 假设我们有50条数据，每...
综上所述，这个压缩包中的JS分页代码涵盖了JavaScript分页实现的基本原理和常见技术。开发者可以根据实际需求选择合适的代码，或者参考这些示例进行定制化开发，以创建符合自己项目需求的用户分页功能。