快捷導(dǎo)航

JavaScript EasyPager 分頁(yè)函數(shù)

更新時(shí)間：2011年05月25日 21:51:27 作者：

好久不寫js,手都有點(diǎn)生了。寫個(gè)小東西熱手。

 
var EasyPager = function(wrap,pageCount,currPage){ 
var d = document 
,el = function(tag,inner,click,css){ 
tag = d.createElement(tag); 
inner && (tag.innerHTML = inner); 
click && (tag.onclick = click); 
css && (tag.className=css); 
return tag; 
} 
,append = function(parent,children,child){ 
children = [].concat(children); 
for(var i=0,j=children.length;i<j;i++){ 
child = children[i]; 
child && parent.appendChild(child); 
} 
return parent; 
} 
,easyFn = function(n){return function(){EasyPager(wrap,pageCount,n)}} 
,box = el("div"),firstPage,prevPage,lastPage,nextPage,startNum,endNum,pages= []; 

currPage!=1 && (firstPage = el("span","<<",easyFn(1)),prevPage = el("span","<",easyFn(currPage-1))); 
currPage!=pageCount && (lastPage = el("span",">>",easyFn(pageCount)),nextPage = el("span",">",easyFn(currPage+1))); 
(pageCount<=10) ? (startNum=1,endNum=pageCount) : (startNum=currPage-4,endNum = currPage+5,(currPage<=5) && (startNum=1,endNum=10),(currPage>=pageCount-5)&&(endNum=pageCount,startNum=pageCount-10+1)); 
for(var i=startNum;i<=endNum;i++)pages.push(el("span",i,easyFn(i),i==currPage?"currSpan":null)) 

append((wrap.innerHTML="",wrap),append(box,[firstPage,prevPage].concat(pages).concat(nextPage,lastPage))); 
}; 

您可能感興趣的文章:

相關(guān)文章

JavaScript中forEach和map詳細(xì)講解
foreach和map都是JavaScript中數(shù)組的常用方法,它們都可以對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)函數(shù),但是它們有一些區(qū)別,下面這篇文章主要給大家介紹了關(guān)于JavaScript中forEach和map詳細(xì)講解的相關(guān)資料,需要的朋友可以參考下
2023-11-11
js實(shí)現(xiàn)仿qq消息的彈出窗效果
這篇文章主要介紹了js實(shí)現(xiàn)仿qq消息的彈出窗效果，文章代碼實(shí)現(xiàn)模擬qq彈出框消息提醒，感興趣的小伙伴們可以參考一下
2016-01-01
js GridView 實(shí)現(xiàn)自動(dòng)計(jì)算操作代碼
js操作GridView,實(shí)現(xiàn)自動(dòng)計(jì)算的實(shí)現(xiàn)代碼，下面的代碼運(yùn)行即可
2009-03-03
require導(dǎo)入module.exports 或 exports導(dǎo)出的使用方法
module.exports用于導(dǎo)出整個(gè)模塊的內(nèi)容,可以通過(guò)賦值給 module.exports 導(dǎo)出一個(gè)對(duì)象、函數(shù)或值,導(dǎo)出的內(nèi)容可以被其他模塊通過(guò)require 導(dǎo)入,本文給大家介紹require導(dǎo)入module.exports 或 exports導(dǎo)出的使用,感興趣的朋友一起看看吧
2023-11-11
axios攔截器機(jī)制的實(shí)現(xiàn)原理詳解
axios 不僅提供了一套跨平臺(tái)請(qǐng)求,另外還提供了“攔截器”這一中間件機(jī)制,方便你在請(qǐng)求之前、響應(yīng)之后做些操作處理,本文給大家詳細(xì)介紹了axios 攔截器機(jī)制是如何實(shí)現(xiàn)的,需要的朋友可以參考下
2024-05-05
淺談Webpack 是如何加載模塊的
這篇文章主要介紹了Webpack 是如何加載模塊的，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
seajs和requirejs模塊化簡(jiǎn)單案例分析
這篇文章主要介紹了seajs和requirejs模塊化,結(jié)合具體案例形式分析了seaj和requirejs模塊化應(yīng)用的相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下
2019-08-08
梳理總結(jié)JavaScript的23個(gè)String方法
文章主要介紹了梳理總結(jié)JavaScript的23個(gè)String方法,JavaScript?中的String類型用于表示文本型的數(shù)據(jù)。它是由無(wú)符號(hào)整數(shù)值作為元素而組成的集合,更多詳細(xì)內(nèi)容需要的朋友可以參考一下
2022-07-07
javascript實(shí)現(xiàn)下雨效果
本文主要介紹了javascript實(shí)現(xiàn)下雨效果的示例代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-03-03
JavaScript實(shí)現(xiàn)郵箱地址自動(dòng)匹配功能代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)E-mail郵箱地址自動(dòng)匹配功能代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11