第原生javascript實現分頁效果隨著近幾年前端行業(yè)的迅猛發(fā)展，各種層出不窮的新框架，新方法讓我們有點眼花繚亂。

最近剛好比較清閑，所以沒事準備擼擼前端的根基javascript,純屬練練手，寫個分頁，順便跟大家分享一下

functionpageFunc(conf){

this.myFunc=conf.click//用戶點擊要執(zhí)行的方法

this.total=conf.total;//總頁數

this.currentPage=1;//當前頁碼

this.init()//初始化

pageFtotype.init=function(){

vartotal=this.total,

currentPage=this.currentPage,

_this=this;

listeners={

'setWhat':function(opts){

_this.aClick(opts.src)

returnfalse;

listenersPre={

'lmw-pre':function(opts){

_this.prevClick()

returnfalse;

listenersAdd={

'lmw-add':function(opts){

_this.addClick()

returnfalse;

varrootele=this.createPage(1,total);

document.getElementById('coat').innerHTML=rootele

$on(document.getElementById('coat'),['click'],listeners);//點擊a標簽

$on(document.getElementById('coat'),['click'],listenersPre);//點擊上一頁

$on(document.getElementById('coat'),['click'],listenersAdd);//點擊下一頁

//創(chuàng)建HTML分頁結構字符串

pageFtotype.createPage=function(page,total){

varstr=`ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"${page}/a`

for(vari=1;ii++){

if(i1){

str=`aattr-action="setWhat"href="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"${i}/a`+str

if(page+itotal){

str=str+`aattr-action="setWhat"href="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"${(page+i)}/a`

if(41){

str='span.../span'+str

if(page+4total){

str=str+'span.../span'

if(page1){

str=`ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"上一頁/aaattr-action="setWhat"href="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"1/a`+str

if(pagetotal){

str=str+`aattr-action="setWhat"href="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"${total}/aahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"下一頁/a`

returnstr

//上一頁方法

pageFtotype.prevClick=function(){

vartotal=this.total

varva=--this.currentPage

varnewret=this.createPage(va,total)

document.getElementById('coat').innerHTML=newret

this.myFunc(va)

//下一頁方法

pageFtotype.addClick=function(){

vartotal=this.total

varva=++this.currentPage

varnewret=this.createPage(va,total)

document.getElementById('coat').innerHTML=newret

this.myFunc(va)

//點擊方法

pageFtotype.aClick=function(_this){

vartotal=this.total

varva=