Js分頁方法多頁碼展示

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

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

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

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

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

6、ageNum：每頁顯示條數(shù)(默認10條)/cla：分頁依據(jù)的class名稱/pager:分頁生成標(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);初始化時需加載readAsignUpdatePageList方法，listCount傳遞總條數(shù)，currentPage傳遞當(dāng)前選中的頁數(shù)，pageNum傳遞每頁顯示條數(shù)，cla傳遞分頁依據(jù)的class名稱，pager傳遞分頁生成標(biāo)簽存放位置class名稱。該種方法支持頁面存在多個分頁模塊的情況。頁面調(diào)用內(nèi)容如下：訂單號客戶姓名11233黃飛鴻11234成龍readAsignUpdatePage

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

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

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

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

12、eDyn+).append().append();/移除點擊事件，避免重復(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);/提交后臺處理$(#+fromNameDyn).submit();/*初始加載分頁方法(動態(tài)請求后臺分頁)。*/fromName:from名稱/listCount:總條數(shù)/currentPage:第幾頁(默認第1頁)/pageNum：每頁顯示條數(shù)(默認10條)functionreadUpdatePageListDyna(fromName,listCount,currentPage,pageNum)this.listCount=listCount;if(fromName)fromNameDyn=fromName;if(pageNum)this.pageNum=pageNum;createPageList(currentPage);初始化需加載readUpdatePageListDyna方法，fromName傳遞分頁的From名稱，listCount傳遞總條數(shù)，currentPage傳遞當(dāng)前選中的