JS Paging Tool

JS Code

/**

 * Paging JS */var page; (function () {var page = {version: "1.0", Author: "Liuxingmi"};var showpage = 9; Page.navigation = function (divID, Totalrecord, Totalpage, CurrentPage, func) {var nav = ' <ul class=\ ' pagination\           "title=\" pagination list \ ">";           Nav + = ' <li class= "totalannal" > Total records: <i id= "Totalrecord" > ' + Totalrecord + ' </i></li> ';           Nav + = ' <li class= "totalpage" > Total pages: <i id= "Totalpage" > ' + totalpage + ' </i></li> ';           Nav + = ' <li class= "currentpage" > Current page: <b id= "Pagenum" > ' + currentpage + ' </b></li> '; if (currentpage = = 1) {nav + = ' <li class= "FirstPage currentstate" ><a href= "javascript:void (0);" id= "firs           Tpage "title=" Home "> Home </a></li>"; Nav + = ' <li class= "previouspage currentstate" ><a href= "javascript:void (0);" id= "FrontPage" title= "Previous page >           Previous page </a></li> '; } else {nav + = ' <li class= ' FirstpagE "><a href=" javascript: ' + func + ' (1); "id=" FirstPage "title=" Home "> Home </a></li>"; Nav + = ' <li class= "previouspage" ><a href= "javascript: ' + func + ' (' + (currentPage-1) + ');" id= "FrontPage" title=           "Previous page" > previous page </a></li> ";             } nav + = ' <li id= ' num ' ><ol> ';             var start = Currentpage-math.floor (SHOWPAGE/2);                          var end = CurrentPage + Math.floor (SHOWPAGE/2);             if (End > Totalpage) {Start-= (end-totalpage);              } if (start <= 0) {start = 1;              } if (CurrentPage < showpage && End < showpage) {end = ShowPage;             } if (end > Totalpage) {end = Totalpage;             } for (var i = start; I <= end; i++) {if (i = = currentpage) { Nav + = ' <li class= ' currentstate "><a title=" go to page 1th "href=" javascript: ' + func + ' (' + i + '); "             > ' + i + ' </a></li> '; } else {nav + = ' <li><a title= ' go to page 1th "href=" javascript: ' + func + ' (' + i + '); "             > ' + i + ' </a></li> ';             }} Nav + = ' </ol></li> ';  if (currentpage = = totalpage) {nav + = ' <li class= ' nextPage currentstate ' ><a href= ' javascript:void (0); "             Id= "NextPage" title= "after page" > Next </a></li> "; Nav + = ' <li class= "LastPage currentstate" ><a href= "javascript:void (0);" id= "LastPage" title= "last" > Last </a             ></i> '; } else {nav + = ' <li class= "nextPage" ><a href= "javascript: ' + func + ' (' + (CurrentPage + 1) + ');" id=             "NextPage" title= "next Page" > next page </a></li> "; Nav + = ' <li class= "lastpage" ><a href= "javascript: ' + func + ' (' + totalpage+ '); "id=" LastPage "title=" last "> Last </a></i>";                     } nav + = ' </ul> ';            $ ("#" + divid). html (NAV);       }; This. page = page;}) ();

As1

/* page style start */.pagination{Overflow:hidden; margin:0 0 0 25px; padding:10px 10px 6px 150px; border-top:1px solid #c8c8c8; _zoom:1; Text-align:center;}. Pagination *{display:inline; float:left; margin:0; padding:0; font-size:12px;}. Pagination i{float:none; padding-right:1px;}. CurrentPage b{float:none; color: #f00;}. Pagination li{List-style:none; margin:0 5px;}. Pagination Li li{position:relative; margin:-2px 0 0; font-family:arial, Helvetica, Sans-serif}.firstpage A,.previousPag E a,.nextpage a,.lastpage a{overflow:hidden; height:0; text-indent:-9999em; border-top:8px solid #fff; border-bottom : 8px solid #fff;}. Pagination Li Li a{margin:0 1px; padding:0 4px; BORDER:3PX double #fff; +border-color: #eee; Background: #eee; Color: #06f; Text-decoration:none;}. Pagination Li Li a:hover{background: #f60; Border-color: #fff; +border-color: #f60; color: #fff;} li.firstpage{margin-left:40px; border-left:3px solid #06f;}. FirstPage a,.previouspage a{border-right:12px solid #06f;}. FirstPage A:hover,.prevIouspage a:hover{border-right-color: #f60;}. NextPage a,.lastpage a{border-left:12px solid #06f;}. NextPage a:hover,.lastpage a:hover{border-left-color: #f60;}. Pagination li.lastpage{border-right:3px solid #06f;}. Pagination Li Li.currentstate a{position:relative; margin:-1px 3px; padding:1px 4px; border:3px double #fff; +border-colo R: #f60; Background: #f60; Color: #fff;}. Pagination li.currentstate,.currentstate a,.currentstate a:hover{border-color: #fff #ccc; cursor:default;} /* End of page style */

Calling methods

Page.navigation ("Pagenav", 1, xxxlist);

<div id= "Pagenav" ></div>

JS Paging Tool