分享一个自己写的简单的javascript分页组件
更新时间：2015年02月15日 08:43:40 投稿：hebedich
这篇文章主要分享一个自己写的简单的javascript分页组件，效果十分不错，代码也很详尽，这里推荐给小伙伴们。
自己写的一个简单的分页组件,主要功能还有实现都在JS中,html页面中只用增加一个放置生成分页的DIV,并给定容器的id.
html结构如下:
复制代码 代码如下:
<ul class="pagination" id="pageDIV">
</ul>
class="pagination" 给定了分页的样式,
id="pageDIV"用于放置JS生成的分页
CSS结构如下:
复制代码 代码如下:
.pagination{
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination>li {
display: inline;
}
.pagination>li:first-child>a{
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination>li>a{
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
cursor: pointer;
}
.pagination>li>a.navcur{
background: #cccccc;
color: #ffffff;
}
下面是JS结构,注意要引用JQuery
复制代码 代码如下:
/**
* @pageContentID 渲染分页的DIV元素
* @curPage 当前开始页
* @totalCount 总数量
* @pageRows 每页显示数量
* @callback 显示数据的回调函数
*/
function PageList(pageContentID,option){
this.pageContentID=document.getElementById(pageContentID);
this.curPage=option.curPage;
this.totalCount=option.totalCount;
this.pageRows=option.pageRows;
this.callback=option.callback;
this.pageSize=Math.ceil(this.totalCount/this.pageRows);
}
PageList.prototype={
init:function(){
this.renderbtn();
},
firstpage:function(){
var _self=this;
_self._firstpage=document.createElement("li");
_self._firstpageA=document.createElement("a");
_self._firstpageA.innerHTML="首页";
_self._firstpage.appendChild(_self._firstpageA);
this.pageContentID.appendChild(_self._firstpage);
_self._firstpage.onclick=function(){
_self.gotopage(1);
}
},
lastpage: function () {
var _self=this;
_self._lastpage=document.createElement("li");
_self._lastpageA=document.createElement("a");
_self._lastpageA.innerHTML="尾页";
_self._lastpage.appendChild(_self._lastpageA);
this.pageContentID.appendChild(_self._lastpage);
_self._lastpage.onclick= function () {
_self.gotopage(_self.pageSize);
}
},
prewpage: function () {
var _self=this;
_self._prew=document.createElement("li");
_self._prewA=document.createElement("a");
_self._prewA.innerHTML="<<";
_self._prew.appendChild(_self._prewA);
this.pageContentID.appendChild(_self._prew);
_self._prew.onclick= function () {
if(_self.curPage>1){
_self.curPage--;
}
_self.callback.call(this,this.curPage);
_self.init();
console.log(_self.curPage);
}
},
nextpage: function () {
var _self=this;
_self._next=document.createElement("li");
_self._nextA=document.createElement("a");
_self._nextA.innerHTML=">>";
_self._next.appendChild(_self._nextA);
this.pageContentID.appendChild(_self._next);
_self._next.onclick= function () {
if(_self.curPage<_self.pageSize){
_self.curPage++;
}
_self.callback.call(this,this.curPage);
_self.init();
console.log(_self.curPage);
}
},
pagenum: function () {
var _self=this;
if(this.pageSize<=10){
for(var i= 1,len=this.pageSize;i<=len;i++){
_self._num=document.createElement("li");
_self._numA=document.createElement("a");
_self._numA.innerHTML=i;
_self._num.appendChild(_self._numA);
this.pageContentID.appendChild(_self._num);
_self._num.onclick= function () {
var curpage = $(this).text();
_self.gotopage(curpage);
}
}
}
else{
if(_self.curPage<=10){
for(var i= 1;i<=10;i++){
_self._num=document.createElement("li");
_self._numA=document.createElement("a");
_self._numA.innerHTML=i;
_self._num.appendChild(_self._numA);
this.pageContentID.appendChild(_self._num);
_self._num.onclick= function () {
var curpage = $(this).text();
_self.gotopage(curpage);
}
}
}
else if(_self.curPage>10&&_self.curPage<=this.pageSize){
if(this.pageSize<Math.ceil(_self.curPage/10)*10){
for(var i=Math.floor(_self.curPage/10)*10+1;i<=this.pageSize;i++){
if(_self.curPage>this.pageSize)
return;
_self._num=document.createElement("li");
_self._numA=document.createElement("a");
_self._numA.innerHTML=i;
_self._num.appendChild(_self._numA);
this.pageContentID.appendChild(_self._num);
_self._num.onclick= function () {
var curpage = $(this).text();
_self.gotopage(curpage);
}
}
}else{
if(Math.ceil(_self.curPage/10)*10==_self.curPage){
for(var i=_self.curPage-9;i<=_self.curPage;i++){
_self._num=document.createElement("li");
_self._numA=document.createElement("a");
_self._numA.innerHTML=i;
_self._num.appendChild(_self._numA);
this.pageContentID.appendChild(_self._num);
_self._num.onclick= function () {
var curpage = $(this).text();
_self.gotopage(curpage);
}
}
}else{
for(var i=Math.floor(_self.curPage/10)*10+1;i<=Math.ceil(_self.curPage/10)*10;i++){
_self._num=document.createElement("li");
_self._numA=document.createElement("a");
_self._numA.innerHTML=i;
_self._num.appendChild(_self._numA);
this.pageContentID.appendChild(_self._num);
_self._num.onclick= function () {
var curpage = $(this).text();
_self.gotopage(curpage);
}
}
}
}
}
}
$(".pagination li").each(function(){
if($(this)[0].innerText==_self.curPage){
$(".pagination li").children("a").removeClass("navcur");
$(this).children("a").addClass("navcur");
}
});
},
gotopage: function (curpage) {
this.curPage=curpage;
this.callback.call(this,this.curPage);
this.init();
console.log(this.curPage);
},
renderbtn: function () {
$(".pagination").html("");
this.firstpage();
this.prewpage();
this.pagenum();
this.nextpage();
this.lastpage();
}
};
$(function(){
var pager = new PageList("pageDIV",{
curPage:1,
totalCount:26,
pageRows:1,
callback:callbackFuc
});
pager.init();
});
function callbackFuc(curpage){
}
说明:
此分页是以10页为标准,低于10页的时候全部显示,大于10页的时候,进行翻页显示余下页数.
调用方法:
复制代码 代码如下:
$(function(){
var pager = new PageList("pageDIV",{
curPage:1,
totalCount:26,
pageRows:1,
callback:callbackFuc
});
pager.init();
});
以上就是本分页组件的核心代码了，希望小伙伴们能够喜欢。
相关文章
一般来说，显示在最前面的窗口都是因为窗口被激活获得焦点，要使窗口永远显示在最前面，可以人为的设置窗口在blur时立刻focus，或者用模式、无模式对话框实现2013-07-07
很多时候，跟后端接口开发对接时，因为需求的关系，需要前端地区数据跟后端的数据要一一对应，有时候需要的是多维数据，这篇文章主要介绍了JS一维数组转化为三维数组的实现示例，感兴趣的可以了解一下2021-12-12
Javascript showModalDialog两个窗体之间传值
前一篇文章Javascript怎么在两个窗体之间传值中讲到了如何利用window.open()方法打开新窗体，并在两个窗体之间传值的方法。2009-09-09
这篇文章主要给大家介绍了关于JavaScript实现MD5加密的六种方式,在JS中可以实现MD5加密算法,可以使用第三方库或者自己编写代码实现,需要的朋友可以参考下2023-09-09
下面小编就为大家带来一篇JS判断是否为JSON对象及是否存在某字段的方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
最近在做一个通用的配置模块。配置模块中必然要对系统的菜单、功能模块、权限资源等进行配置，为了更好的用户体验，图标是必不可少的！2011-07-07
这篇文章主要为大家详细介绍了laypage.js分页插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了bootstrap+jQuery实现的动态进度条功能,结合完整实例形式分析了bootstrap+jQuery实现动态进度条的具体步骤与相关操作技巧,需要的朋友可以参考下2017-05-05
JavaScript利用构造函数和原型的方式模拟C#类的功能
这篇文章主要介绍了JavaScript利用构造函数和原型的方式模拟C#类的功能。需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
这篇文章主要介绍了javascript控制层显示或隐藏的方法,涉及javascript操作页面元素样式的相关技巧,非常简单实用,需要的朋友可以参考下2015-07-07
最新评论