Js分頁(yè)方法多頁(yè)碼展示

1、該分頁(yè)方法依賴于JQuery進(jìn)行分頁(yè)。分頁(yè)效果如下：可以直接點(diǎn)1、2、3、4，點(diǎn)擊后跳到相應(yīng)頁(yè)數(shù)。當(dāng)然，也可以自定義展示的頁(yè)數(shù)多少。本例中，共分兩種分頁(yè)方法，一個(gè)是頁(yè)面JQuery分頁(yè)方式，一個(gè)是動(dòng)態(tài)from請(qǐng)求分頁(yè)方式。兩種方式可以任意選擇，頁(yè)面分頁(yè)方式簡(jiǎn)單，所有內(nèi)容一次性加載，點(diǎn)分頁(yè)標(biāo)簽無(wú)需再次請(qǐng)求后臺(tái)，響應(yīng)快速。第二種節(jié)省資源，每次只加載需要顯示的內(nèi)容即可。一頁(yè)面JQuery標(biāo)簽分頁(yè)：/*頁(yè)面分頁(yè)多頁(yè)標(biāo)簽展示版頁(yè)面JQuery分頁(yè)不請(qǐng)求后臺(tái)*/*創(chuàng)建分頁(yè)列表*/functioncreateAsignPageList(currentPage,cla,pager)vardataPageNum

2、=$(.+pager).attr(dataNum);vardataListCount=$(.+pager).attr(data-listCount);/總頁(yè)數(shù)vartotalPages=Math.ceil(dataListCount/dataPageNum);/展示頁(yè)數(shù)vardisnum=4;/開(kāi)始位置varforstart;/結(jié)束位置varforend;/開(kāi)始位置計(jì)算forstart=Math.round(currentdisnum/2);/開(kāi)始位置最小值處理if(forstartforend-forstart)forend=forend+(disnum-(forend-forstart)-

3、1);/結(jié)束位置最大值處理，不能大于總頁(yè)數(shù)if(forendtotalPages)/調(diào)整開(kāi)始位置forstart=forstart-(forend-totalPages);forend=totalPages;/開(kāi)始位置最小值處理if(forstart0)/當(dāng)前頁(yè)數(shù)不為1時(shí)的上一頁(yè)if(currentPage!=1)varlast=parseInt(currentPage)-1;htmlstr+=;elsehtmlstr+=;/循環(huán)創(chuàng)建分頁(yè)標(biāo)簽for(vari=forstart;i=totalPages&i=forend;i+)if(currentPage=i)/當(dāng)前頁(yè)樣式處理htmlstr+=

4、+currentPage+;else/展示頁(yè)標(biāo)簽處理htmlstr+=+i+;/當(dāng)前頁(yè)不是最后頁(yè)時(shí)加下一頁(yè)標(biāo)簽if(currentPage!=totalPages)varnext=parseInt(currentPage)+1;htmlstr+=;elsehtmlstr+=;/尾頁(yè)標(biāo)簽htmlstr+=;/寫入分頁(yè)$(.+pager).html(htmlstr);/*分頁(yè)處理*/functionupdateAsignPageList(page,cla,pager)vardataPageNum=$(.+pager).attr(dataNum);/開(kāi)始行varfirstSupplierNum=da

5、taPageNum*(1);/結(jié)束行varendSupplierNum=firstSupplierNum+(dataPageNum-1);if(cla)$(.+cla).show();/開(kāi)始行之前隱藏$(.+cla+:lt(+firstSupplierNum.toString()+).hide();/結(jié)束行之后隱藏$(.+cla+:gt(+endSupplierNum.toString()+).hide();/創(chuàng)建分頁(yè)標(biāo)簽createAsignPageList(page,cla,pager);/*初始加載分頁(yè)方法。*/listCount:總條數(shù)/currentPage:第幾頁(yè)(默認(rèn)第1頁(yè))/p

6、ageNum：每頁(yè)顯示條數(shù)(默認(rèn)10條)/cla：分頁(yè)依據(jù)的class名稱/pager:分頁(yè)生成標(biāo)簽存放位置class名稱functionreadAsignUpdatePageList(listCount,currentPage,pageNum,cla,pager)$(.+pager).attr(dataNum,pageNum);$(.+pager).attr(data-listCount,listCount);if(currentPage=|!currentPage)updateAsignPageList(1);elsevartotal=Math.ceil(listCount/pageNum

7、);if(totalcurrentPage)updateAsignPageList(1,cla,pager);elseupdateAsignPageList(currentPage,cla,pager);初始化時(shí)需加載readAsignUpdatePageList方法，listCount傳遞總條數(shù)，currentPage傳遞當(dāng)前選中的頁(yè)數(shù)，pageNum傳遞每頁(yè)顯示條數(shù)，cla傳遞分頁(yè)依據(jù)的class名稱，pager傳遞分頁(yè)生成標(biāo)簽存放位置class名稱。該種方法支持頁(yè)面存在多個(gè)分頁(yè)模塊的情況。頁(yè)面調(diào)用內(nèi)容如下：訂單號(hào)客戶姓名11233黃飛鴻11234成龍readAsignUpdatePage

8、List(2,1,10,inquirylist,orderInquiryPage);動(dòng)態(tài)from請(qǐng)求分頁(yè)：/*頁(yè)面分頁(yè)多頁(yè)標(biāo)簽展示版動(dòng)態(tài)form請(qǐng)求分頁(yè)請(qǐng)求from后臺(tái)*/varlistCount=0;varpageNum=10;動(dòng)態(tài)分頁(yè)訪問(wèn)的from名varfromNameDyn=;/*創(chuàng)建分頁(yè)列表*/functioncreatePageList(currentPage)/總頁(yè)數(shù)vartotalPages=Math.ceil(listCount/pageNum);/展示頁(yè)數(shù)vardisnum=4;/開(kāi)始位置varforstart=1;/結(jié)束位置varforend=disnum;/開(kāi)始位置計(jì)算

9、forstart=Math.round(currentdisnum/2);/開(kāi)始位置最小值處理if(forstartforend-forstart)forend=forend+(disnum-(forend-forstart)-1);/結(jié)束位置最大值處理，不能大于總頁(yè)數(shù)if(forendtotalPages)/調(diào)整開(kāi)始位置forstart=forstart-(forend-totalPages);forend=totalPages;/開(kāi)始位置最小值處理if(forstart0)/當(dāng)前頁(yè)數(shù)不為1時(shí)的上一頁(yè)if(currentPage!=1)varlast=parseInt(currentPage

10、)-1;htmlstr+=;elsehtmlstr+=;/循環(huán)創(chuàng)建分頁(yè)標(biāo)簽for(vari=forstart;i=totalPages&i0)htmlstr+=+currentPage+;elsehtmlstr+=+currentPage+;else/展示頁(yè)標(biāo)簽處理if(fromNameDyn.length0)htmlstr+=+i+;elsehtmlstr+=+i+;/當(dāng)前頁(yè)不是最后頁(yè)時(shí)加下一頁(yè)標(biāo)簽if(currentPage!=totalPages)varnext=parseInt(currentPage)+1;htmlstr+=;elsehtmlstr+=;/尾頁(yè)標(biāo)簽htmlstr+=;

11、/寫入分頁(yè)htmlstr+=+;$(divdata=+fromNameDyn+).html(htmlstr);/*分頁(yè)處理*/functionupdatePageDynList(fromNameDyn,page)/如果是動(dòng)態(tài)加載，則向頁(yè)面添加兩個(gè)隱藏的表單if(fromNameDyn.length0)/添加當(dāng)前頁(yè)數(shù)表單和每頁(yè)顯示條數(shù)表單$(divdata=+fromNameDyn+inputname=hdIndexPage).remove();$(divdata=+fromNameDyn+inputname=hdIndexPageNum).remove();$(divdata=+fromNam

12、eDyn+).append().append();/移除點(diǎn)擊事件，避免重復(fù)提交$(divdata=+fromNameDyn+span).attr(data-restart,updatePageDynList(+fromNameDyn+,+page+);$(divdata=+fromNameDyn+a).attr(data-restart,updatePageDynList(+fromNameDyn+,+page+);$(divdata=+fromNameDyn+span).removeAttr(onclick);$(divdata=+fromNameDyn+a).removeAttr(oncl

13、ick);/提交后臺(tái)處理$(#+fromNameDyn).submit();/*初始加載分頁(yè)方法(動(dòng)態(tài)請(qǐng)求后臺(tái)分頁(yè))。*/fromName:from名稱/listCount:總條數(shù)/currentPage:第幾頁(yè)(默認(rèn)第1頁(yè))/pageNum：每頁(yè)顯示條數(shù)(默認(rèn)10條)functionreadUpdatePageListDyna(fromName,listCount,currentPage,pageNum)this.listCount=listCount;if(fromName)fromNameDyn=fromName;if(pageNum)this.pageNum=pageNum;createPageList(currentPage);初始化需加載readUpdatePageListDyna方法，fromName傳遞分頁(yè)的From名稱，listCount傳遞總條數(shù)，currentPage傳遞當(dāng)前選中的