Javascript paging code example sharing (js paging) _ javascript tips-js tutorial

This article mainly introduces the javascript paging instance. You can call it for reference:

The Code is as follows:

Var pageChange = function (index ){
Var html = pager ("pid", index, 5, 1000, pageChange, {showGoTo: false, showFirst: false });
}

Implementation:

The Code is as follows:

Pager = function (pPager, pageIndex, pageSize, totalCount, pageChange, opt ){

Var theOpt = {
BarSize: 5, // Number of pages displayed
BarTemplate: "{bar} {totalPage} {totalCount} {goto}", // display template
AutoHide: true, // whether to hide automatically
ShowFirst: true, // If totalPage> barSize is used, the first page Link is automatically displayed.
ShowLast: true, // If totalPage> barSize is used, the last page Link is automatically displayed.
ShowGoTo: true, // whether to display GoTo
AutoHideGoTo: true // whether to automatically hide GoTo if there are too few
};

If (opt ){
If (opt. barSize)
TheOpt. barSize = opt. barSize;
If (opt. barTemplate)
TheOpt. barTemplate = opt. barTemplate;
If (opt. autoHide = false)
TheOpt. autoHide = false;
If (opt. showFirst = false)
TheOpt. showFirst = false;
If (opt. showLast = false)
TheOpt. showLast = false;
If (opt. showGoTo = false)
TheOpt. showGoTo = false;
If (opt. autoHideGoTo = false)
TheOpt. autoHideGoTo = false;
}
Var handles = window. myPagerChanges = (function (x) {return x;} (window. myPagerChanges || {}));

If (! MyPagerChanges [pPager]) myPagerChanges [pPager] = pageChange;

Var startPage = 0; // page entry start page
Var endPage = 0; // The end page of the page.
Var showFirst = true;
Var showLast = true;


If (isNaN (pageIndex )){
PageIndex = 1;
}
PageIndex = parseInt (pageIndex );
If (pageIndex <= 0)
PageIndex = 1;
If (pageIndex * pageSize> totalCount ){
PageIndex = Math. ceil (totalCount/pageSize );
}

If (totalCount = 0) {// if no data exists
Document. getElementById (pPager). innerHTML = "";
Return "";
}

Var totalPage = Math. ceil (totalCount/pageSize );
If (theOpt. autoHide & totalCount <= pageSize) {// hide automatically
Document. getElementById (pPager). innerHTML = "";
Return "";
}

If (totalPage <= theOpt. barSize ){
StartPage = 1;
EndPage = this. totalPage;
TheOpt. showLast = theOpt. showFirst = false;
}
Else {
If (pageIndex <= Math. ceil (theOpt. barSize/2) {// The first few pages
StartPage = 1;
EndPage = theOpt. barSize;
TheOpt. showFirst = false;
}
Else if (pageIndex> (totalPage-theOpt. barSize/2) {// when
StartPage = totalPage-theOpt. barSize + 1;
EndPage = totalPage;
TheOpt. showLast = false;
}
Else {// In the middle of the page
StartPage = pageIndex-Math. ceil (theOpt. barSize/2) + 1;
EndPage = pageIndex + Math. floor (theOpt. barSize/2 );
}
If (totalPage <= (theOpt. barSize * 1.5 )){
TheOpt. showLast = theOpt. showFirst = false;
}
}

Function _ getLink (index, txt ){
If (! Txt) txt = index;
Return "" + txt + "";
}

Var barHtml = ""; // pagination bar
BarHtml + = pageIndex = 1? "": _ GetLink (pageIndex-1, "Previous Page ");
If (theOpt. showFirst ){
BarHtml + = _ getLink (1) + "...";
}
For (var index = startPage; index <= endPage; index ++ ){

If (index = pageIndex ){
BarHtml + = "" + index + "";
}
Else {
BarHtml + = _ getLink (index );
}
}
If (theOpt. showLast ){
BarHtml + = "..." + _ getLink (totalPage );
}
BarHtml + = pageIndex = totalPage? "": _ GetLink (pageIndex + 1, "Next page ");

Var gotoHtml = ""; // goto box and button
If (theOpt. showGoTo & theOpt. barTemplate. indexOf ("{goto}")> 0 ){
If (theOpt. autoHideGoTo & totalPage> 15) | theOpt. autoHideGoTo = false ){
Var txtid = pPager + "_ goIndex ";
Var indexVal = "document. getElementById (\" "+ txtid +" \ "). value ";
GotoHtml + ="";
GotoHtml + ="";
}
}

// Replace the Template
Var pagerHtml = theOpt. barTemplate. replace ("{bar}", barHtml)
. Replace ("{totalCount}", totalCount)
. Replace ("{pageIndex}", pageIndex)
. Replace ("{totalPage}", totalPage)
. Replace ("{goto}", gotoHtml );

Document. getElementById (pPager). innerHTML = pagerHtml;
Return pagerHtml;
};