jQuery front-end paging example sharing_jquery

When people do paging, most of them return an HTML string for the navigation bar in the background. In fact, it is also easy to implement using js on the front end.

Call the pager method, enter parameters, and an HTML string of the navigation bar will be returned. The internals of the method are relatively simple.

Copy code The code is as follows:

/**
* pageSize, number displayed per page
* pageIndex, current page number
* pageCount Total number of pages
* url connection address
* Example of using pager(10, 1, 5, 'Index')
*/
function pager(pageSize, pageIndex, pageCount, url) {
var intPage = 7; //Number display
var intBeginPage = 0;//Number of starting pages
var intEndPage = 0;//Ending page number
var intCrossPage = parseInt(intPage / 2); //Displayed number
var strPage = "

page" pageIndex "/" pageCount " Page per page" pageSize " strips";
If (pageIndex > 1) {
           strPage = strPage "Homepage ";
strPage = strPage "Previous page< /a> ";
}
If (pageCount > intPage) {//The total number of pages is greater than the number of pages displayed on the page
If (pageIndex > pageCount - intCrossPage) {//Current page number >Total number of pages-3
               intBeginPage = pageCount - intPage 1;
               intEndPage = pageCount;
}
         else {
If (pageIndex <= intPage - intCrossPage) {
                  intBeginPage = 1;
                 intEndPage = intPage;
            }
             else {
                  intBeginPage = pageIndex - intCrossPage;
intEndPage = pageIndex intCrossPage;
            }
}
} else {
intBeginPage = 1;
          intEndPage = pageCount;
}
If (pageCount > 0) {
for (var i = intBeginPage; i <= intEndPage; i ) {
                {
If (i == pageIndex) {//Current page
                       strPage = strPage " " i " ";
                }
                   else {
strPage = strPage " " i " " ;
                }
            }
}
}
If (pageIndex < pageCount) {
strPage = strPage "Next page ";
        strPage = strPage "尾页 ";
    }
    return strPage "

";
}

Try this method

复制代码

http://www.w3.org/1999/xhtml">

   
   
   
   
   


   

       
           
               
               
               
               
               
               
               
               
               
               
               
           
       
       
   

CustomerID	CompanyName	ContactName	ContactTitle	Address	City	Region	PostalCode	Country	Phone	Fax

   

[/code]

看下效果

列有点多，我只截图了部分，界面好丑，加点样式，用bootstrap来美化下

使用Nuget安装bootstrap

加上样式后

虽说不是特别漂亮，但还是对得起观众吧。

代码下载https://github.com/dengjianjun/JsPager

如果觉得对你有帮助，请点个赞，谢谢！