分享一個(gè)自己寫(xiě)的簡(jiǎn)單的javascript分頁(yè)組件
更新時(shí)間：2015年02月15日 08:43:40 投稿：hebedich
這篇文章主要分享一個(gè)自己寫(xiě)的簡(jiǎn)單的javascript分頁(yè)組件，效果十分不錯(cuò)，代碼也很詳盡，這里推薦給小伙伴們。
自己寫(xiě)的一個(gè)簡(jiǎn)單的分頁(yè)組件,主要功能還有實(shí)現(xiàn)都在JS中,html頁(yè)面中只用增加一個(gè)放置生成分頁(yè)的DIV,并給定容器的id.
html結(jié)構(gòu)如下:
復(fù)制代碼 代碼如下:
<ul class="pagination" id="pageDIV">
</ul>
class="pagination" 給定了分頁(yè)的樣式,
id="pageDIV"用于放置JS生成的分頁(yè)
CSS結(jié)構(gòu)如下:
復(fù)制代碼 代碼如下:
.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結(jié)構(gòu),注意要引用JQuery
復(fù)制代碼 代碼如下:
/**
* @pageContentID 渲染分頁(yè)的DIV元素
* @curPage 當(dāng)前開(kāi)始頁(yè)
* @totalCount 總數(shù)量
* @pageRows 每頁(yè)顯示數(shù)量
* @callback 顯示數(shù)據(jù)的回調(diào)函數(shù)
*/
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="首頁(yè)";
_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="尾頁(yè)";
_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){
}
說(shuō)明:
此分頁(yè)是以10頁(yè)為標(biāo)準(zhǔn),低于10頁(yè)的時(shí)候全部顯示,大于10頁(yè)的時(shí)候,進(jìn)行翻頁(yè)顯示余下頁(yè)數(shù).
調(diào)用方法:
復(fù)制代碼 代碼如下:
$(function(){
var pager = new PageList("pageDIV",{
curPage:1,
totalCount:26,
pageRows:1,
callback:callbackFuc
});
pager.init();
});
以上就是本分頁(yè)組件的核心代碼了，希望小伙伴們能夠喜歡。
您可能感興趣的文章:
- Vue.js分頁(yè)組件實(shí)現(xiàn)：diVuePagination的使用詳解
- vuejs2.0實(shí)現(xiàn)分頁(yè)組件使用$emit進(jìn)行事件監(jiān)聽(tīng)數(shù)據(jù)傳遞的方法
- angularjs使用directive實(shí)現(xiàn)分頁(yè)組件的示例
- Reactjs實(shí)現(xiàn)通用分頁(yè)組件的實(shí)例代碼
- 原生js編寫(xiě)基于面向?qū)ο蟮姆猪?yè)組件
- Vue.js實(shí)現(xiàn)一個(gè)自定義分頁(yè)組件vue-paginaiton
- 使用vue.js制作分頁(yè)組件
- 基于Vue.js的表格分頁(yè)組件
- js多功能分頁(yè)組件layPage使用方法詳解
- JavaScript分頁(yè)組件使用方法詳解
相關(guān)文章
詳解微信小程序 頁(yè)面跳轉(zhuǎn) 傳遞參數(shù)
這篇文章主要介紹了詳解微信小程序 頁(yè)面跳轉(zhuǎn) 傳遞參數(shù)，現(xiàn)在分享給大家，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-12-12
Pyqt常常使用主從架構(gòu)（Master-Workers 架構(gòu)）來(lái)避免界面卡死的情況,本文主要介紹了Pyqt5實(shí)現(xiàn)多線程程序的使用示例,感興趣的可以了解一下2023-11-11
這篇文章主要給大家介紹了關(guān)于如何使用JavaScript解析URL的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
下面小編就為大家?guī)?lái)一篇JavaScript注入漏洞的原理及防范(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
js采用concat和sort將N個(gè)數(shù)組拼接起來(lái)的方法
這篇文章主要介紹了js采用concat和sort將N個(gè)數(shù)組拼接起來(lái)的方法,涉及JavaScript針對(duì)數(shù)組的合并與排序操作相關(guān)技巧,需要的朋友可以參考下2016-01-01
關(guān)于base64編碼和解碼的js工具函數(shù)
這篇文章主要介紹了關(guān)于base64編碼和解碼的js工具函數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
javascript設(shè)計(jì)模式之模塊模式學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之模塊模式學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
js實(shí)現(xiàn)完全自定義可帶多級(jí)目錄的網(wǎng)頁(yè)鼠標(biāo)右鍵菜單方法
這篇文章主要介紹了js實(shí)現(xiàn)完全自定義可帶多級(jí)目錄的網(wǎng)頁(yè)鼠標(biāo)右鍵菜單方法,實(shí)例分析了javascript實(shí)現(xiàn)自定義網(wǎng)頁(yè)鼠標(biāo)右鍵彈出菜單的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
JavaScript保存并運(yùn)算頁(yè)面中數(shù)字類型變量的寫(xiě)法
這篇文章主要介紹了JavaScript保存并運(yùn)算頁(yè)面中數(shù)字類型變量的寫(xiě)法,當(dāng)你在頁(yè)面中需要不停運(yùn)算一個(gè)數(shù)字變量時(shí)非常有用,普通的寫(xiě)法不能正常運(yùn)算,使用本文方法就可以,需要的朋友可以參考下2015-07-07
el-upload實(shí)現(xiàn)上傳文件并展示進(jìn)度條功能
這篇文章主要介紹了el-upload實(shí)現(xiàn)上傳文件并展示進(jìn)度條，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05