JavaScript
面向对象的纯js分页组件
墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网
我也要 关注 + 加入社区这是小弟我开发的一个纯js的分页组件，支持刷新的和不刷新的分页，和任何后台技术无关，完全用js来控制，因为里面的代码依赖了jquery,所以使用时要先导入jquery.js。
代码如下：
使用方法如下：
1、 对于无需刷新的页面应用：
第一步：导入jquery.js
<script src="jquery.js"></script>
第二步：导入分页组件
<script src="pager.js"></script>
第三步：在页面上声明一个全局的js变量，
var pager;
第四步：在页面的初始化方法中实例化这个分页变量
$(function(){
pager=new Pager(0,//总的记录数
pageSize,//每页显示的记录数
‘pager’,//这是一个页面中的div元素的id，它就是分页组件的容器
function(currentPage){//传给分页组件的回调函数 mySheet.DoSearch("queryBudgetData.jsp",searchParam+"¤tPage="+currentPage);}
);
})
第五步：在页面中设定容纳分页组件元素的div
<div id="pager"></div>
第六步：当在页面中执行查询时，将查询到的总的记录数传给分页组件
pager.reDraw(recordCount);
2、 对于需要刷新的页面的使用方法和上面的前五步一样，不需要第六步，在第四步实例化这个分页组件的时候，最后要把当前页给传进去就行了，并且第一个参数应该是总的记录数
pager=new Pager(recordCount,pageSize,"pager",function(currentPage){ mySheet.DoSearch("queryBudgetData.jsp",searchParam+"¤tPage="+currentPage);
},currentPage);
因为我的这个应用是基于无刷新的，所以需要刷新的情况我没有测试，大概应该没问题，需要用的同学可以试试，不行的话就修改源代码。
这是小弟第一次尝试用OO的方式来写js,很是兴奋，不足之处，欢迎大家指教。
代码如下：
/**
*
* @param {} recordCount 总的记录数
* @param {} pageSize 每页的记录数
* @param {} divId 容纳分页元素的id
* @param {} funPageSearch 回调的查询方法
* currentPage 当前页,默认为1
* @author:yxd
* @email:yxd_yxd2008@163.com
*/
function Pager(recordCount,pageSize,divId,funPageSearch,currentPage){
this.recordCount=recordCount;
this.pageSize=pageSize;
this.pageContainer=$("#"+divId);
this.funPageSearch=funPageSearch;
this.currentPage=currentPage || 1;
this.totalPage=this.calculateTotalPage(recordCount);
this.htmlRecordCount=null;
this.htmlTotalPage=null;
this.htmlInputPage=null;
this.htmlFirstPage=null;
this.htmlPrvPage=null;
this.htmlNextPage=null;
this.htmlLastPage=null;
this.htmlDiv=null;
this.draw();
}
Pager.prototype={
draw:function(){
var oo=this;
var str='共<span>'+this.recordCount+'</span>行 '+
'每页'+this.pageSize+'行 '+
'共<span>'+this.totalPage+'</span>页 '+
'<div style="display:none;">转到第<input value="'+this.currentPage+'" style="width:28px" maxlength="'+this.maxLength()+'">页 '+
'<span>首页</span> '+
'<span>上页</span> '+
'<span>下页</span> '+
'<span>尾页</span></div> ';
this.pageContainer.append(str);
this.htmlRecordCount=$("span:eq(0)",this.pageContainer);
this.htmlTotalPage=$("span:eq(1)",this.pageContainer);
this.htmlInputPage=$("input:eq(0)",this.pageContainer);
this.htmlFirstPage=$("span:eq(2)",this.pageContainer);
this.htmlPrvPage=$("span:eq(3)",this.pageContainer);
this.htmlNextPage=$("span:eq(4)",this.pageContainer);
this.htmlLastPage=$("span:eq(5)",this.pageContainer);
this.htmlDiv=$("div",this.pageContainer);
if(this.totalPage>1){
this.htmlDiv.css("display","inline");
}
//设定按钮的样式
this.setButtonStyle();
//为按钮绑定事件
//首页
this.htmlFirstPage.click(function(){
if(oo.currentPage!=1){
oo.currentPage=1;
oo.gotoPage();
}
});
//上页
this.htmlPrvPage.click(function(){
if(oo.currentPage!=1){
oo.currentPage--;
oo.gotoPage();
}
});
//下页
this.htmlNextPage.click(function(){
if(oo.currentPage!=oo.totalPage){
oo.currentPage++;
oo.gotoPage();
}
});
//尾页
this.htmlLastPage.click(function(){
if(oo.currentPage!=oo.totalPage){
oo.currentPage=oo.totalPage;
oo.gotoPage();
}
});
//处理输入框的事件
this.htmlInputPage.focus(function(){
this.select();
}).change(function(){
if( isNaN(Number(this.value))
|| Number(this.value)==0
|| Number(this.value)>oo.totalPage){
this.value=oo.currentPage;
return;
}
oo.currentPage=Number(this.value);
oo.gotoPage();
}).keydown(function(evt){
var validKey={48:0,49:1,50:2,51:3,52:4,53:5,54:6,55:7,56:8,57:9,
96:0,97:1,98:2,99:3,100:4,101:5,102:6,103:7,104:8,105:9,
8:'',37:'',39:'',46:''};
if(!(evt.keyCode in validKey)){
return false;
}
});
},
gotoPage:function(){
if(this.htmlInputPage.val()!=this.currentPage){
this.htmlInputPage.val(this.currentPage);
}
this.setButtonStyle();
this.funPageSearch(this.currentPage);
},
maxLength:function(){//计算输入页数的长度
return (this.totalPage+'').length;
},
setButtonStyle:function(){//根据当前的页数设置按钮的样式
switch(this.currentPage){
case 1:{
this.htmlFirstPage.css({cursor:"",color:"grey"});
this.htmlPrvPage.css({cursor:"",color:"grey"});
this.htmlNextPage.css({cursor:"pointer",color:"black"});
this.htmlLastPage.css({cursor:"pointer",color:"black"});
break;
}
case this.totalPage:{
this.htmlFirstPage.css({cursor:"pointer",color:"black"});
this.htmlPrvPage.css({cursor:"pointer",color:"black"});
this.htmlNextPage.css({cursor:"",color:"grey"});
this.htmlLastPage.css({cursor:"",color:"grey"});
break;
}
default:{
this.htmlFirstPage.css({cursor:"pointer",color:"black"});
this.htmlPrvPage.css({cursor:"pointer",color:"black"});
this.htmlNextPage.css({cursor:"pointer",color:"black"});
this.htmlLastPage.css({cursor:"pointer",color:"black"});
break;
}
}
},
calculateTotalPage:function(_recordCount){//计算出总页数
return Math.floor((_recordCount+this.pageSize-1)/this.pageSize);
},
reDraw:function(_recordCount){//对于不刷新的查询，需要根据总记录数来重新设置分页元素
this.currentPage=1;
this.recordCount=Number(_recordCount);
this.totalPage=this.calculateTotalPage(this.recordCount);
if(this.totalPage<2){
this.htmlDiv.css("display","none");
}else{
this.htmlDiv.css("display","inline");
}
this.setButtonStyle();
this.htmlRecordCount.html(this.recordCount);
this.htmlTotalPage.html(this.totalPage);
this.htmlInputPage.val(this.currentPage);
this.htmlInputPage.attr("maxlength",this.maxLength());
},
constructor:Pager
}使用方法如下：
1、 对于无需刷新的页面应用：
第一步：导入jquery.js
<script src="jquery.js"></script>
第二步：导入分页组件
<script src="pager.js"></script>
第三步：在页面上声明一个全局的js变量，
var pager;
第四步：在页面的初始化方法中实例化这个分页变量
$(function(){
pager=new Pager(0,//总的记录数
pageSize,//每页显示的记录数
‘pager’,//这是一个页面中的div元素的id，它就是分页组件的容器
function(currentPage){//传给分页组件的回调函数 mySheet.DoSearch("queryBudgetData.jsp",searchParam+"¤tPage="+currentPage);}
);
})
第五步：在页面中设定容纳分页组件元素的div
<div id="pager"></div>
第六步：当在页面中执行查询时，将查询到的总的记录数传给分页组件
pager.reDraw(recordCount);
2、 对于需要刷新的页面的使用方法和上面的前五步一样，不需要第六步，在第四步实例化这个分页组件的时候，最后要把当前页给传进去就行了，并且第一个参数应该是总的记录数
pager=new Pager(recordCount,pageSize,"pager",function(currentPage){ mySheet.DoSearch("queryBudgetData.jsp",searchParam+"¤tPage="+currentPage);
},currentPage);
因为我的这个应用是基于无刷新的，所以需要刷新的情况我没有测试，大概应该没问题，需要用的同学可以试试，不行的话就修改源代码。
这是小弟第一次尝试用OO的方式来写js,很是兴奋，不足之处，欢迎大家指教。
...全文
相关推荐
自制纯js分页框架
自制纯js分页工具,花了点时间自己写的,比pagination更纯净更微型
laypage多功能JavaScript分页组件v1.3源码解析与实战
在前端开发中，分页组件作为数据展示的重要交互载体，其设计质量直接影响用户体验与系统性能。Layui 框架中的laypage组件自发布以来，因其简洁的 API 设计、灵活的功能扩展以及卓越的轻量化表现，迅速成为众多开发者构建后台管理系统和内容型页面的首选工具。它不仅解决了传统分页实现中代码冗余、结构复杂的问题，更通过模块化架构与事件驱动机制，为现代 Web 应用提供了高度可定制的分页解决方案。不同于许多依赖 jQuery 或其他重型框架的第三方插件，laypage。
原生js编写基于面向对象的分页组件
主要为大家详细介绍了原生js编写基于面向对象的分页组件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js分页组件及部分关键代码
js pagiantion插件分页，组件及主要js调用代码；适合有点基础的同学
servlet+jsp+js分页组件
极好的学习分页的案例. 里面有说明 案例 和详细的界图,而且实现的是真分页.
