JS Paging Tool Instance _javascript tips

This example describes the use of the JS paging tool. Share to everyone for your reference. The implementation methods are as follows:

JS Code section:

Copy Code code as follows:

/**
* Page Pagination 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=\ ' paging list \ ' > ';
Nav + + <li class= "totalannal" > Total record number: <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=" FirstPage "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 page </a>& Lt;/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=" "next Page" > next page < /a></li> ';
Nav + + "<li class=" LastPage currentstate "><a href=" javascript:void (0); "id=" LastPage "End" > End title= ></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=" End "> last page & Lt;/a></i> ';
}
Nav + = ' </ul> ';
$ ("#" + divid). html (NAV);
};
This. page = page;
})();

CSS section:

Copy Code code as follows:

/* Pagination 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,.previouspage 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-color: #f60;
Background: #f60;
Color: #fff;
}
. pagination Li.currentstate,.currentstate A,.currentstate a:hover{
Border-color: #fff #ccc;
Cursor:default;
}
/* Pagination Style End * *

Call Method:

Copy Code code as follows:

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

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

The

wants this article to help you with your JavaScript programming.