Implementation Code of Pager Based on JQuery

The instance is as follows:



Instructions for use
The jQuery library file and the JQuery Pager library file must be used (current version 1.1)

Material Preparation
The CSS sample file of the sub-page, which can be copied as the CSS sample and named pager.css.

Copy codeThe Code is as follows:
# Pager ul. pages {
Display: block;
Border: none;
Text-transform: uppercase;
Font-size: 10px;
Margin: 10px 0 50px;
Padding: 0;
}
# Pager ul. pages li {
List-style: none;
Float: left;
Border: 1px solid # ccc;
Text-decoration: none;
Margin: 0 5px 0 0;
Padding: 5px;
}
# Pager ul. pages li: hover {
Border: 1px solid # 003f7e;
}
# Pager ul. pages li. pgEmpty {
Border: 1px solid # eee;
Color: # eee;
}
# Pager ul. pages li. pgCurrent {
Border: 1px solid # 003f7e;
Color: #000;
Font-weight: 700;
Background-color: # eee;
}

Instance code
1. Contains the file section
Copy codeThe Code is as follows:
<Link href = "Pager.css" rel = "stylesheet" type = "text/css"/>
<Script src = "jquery. js" type = "text/javascript"> </script>
<Script src = "jquery. pager. js" type = "text/javascript"> </script>

One CSS style file and two JS library files.

2. HTML part (the page splitter displays the div)
Copy codeThe Code is as follows:
<H1 id = "result"> excellent blog jQuery binder <Div id = "pager"> </div>

Iii. javascript part (called by jQuery Pager)
Copy codeThe Code is as follows:
<Script type = "text/javascript" language = "javascript">
$ (Document). ready (function (){
$ ("# Pager"). pager ({pagenumber: 1, pagecount: 15, buttonClickCallback: PageClick });
});
PageClick = function (pageclickednumber ){
$ ("# Pager"). pager ({pagenumber: pageclickednumber, pagecount: 15, buttonClickCallback: PageClick
});
$ ("# Result" ).html ("the current page number of the jQuery browser of the blog" + pageclickednumber + "page ");
}
</Script>

Iv. javascript code (called by JQuery Pager) Analysis
(1) $ ("# pager"). pager ({}); Part
Pagenumber, indicating the initial page number, such as: 1
Pagecount, indicating the total number of pages, for example, 15
ButtonClickCallback indicates the method called by clicking the page number, for example, PageClick

(2) PageClick = function (pageclickednumber) {}
PageClick indicates the function Method for customizing the number of pages to be clicked, such as: function (pageclickednumber ){}

The jQuery plug-in JQuery Pager page splitter only requires the starting page number pagenumber and the maximum page number pagecount. When you click the page number, the function of buttonClickCallback can be called to implement the javascript paging function, in practical applications, you only need to make a simple modification to the PageClick method. For example, if you set pagenumber and pagecount as variables, you can pass the page number value through the GET method, JQuery Pager can implement the javascript paging function. Other functions can be expanded on its own. At the same time, it provides a wide range of dynamic effects for the jQuery Pager buttonClickCallback Method for your reference.
DEMO code: http://demo.jb51.net/js/jquery-pager/index.html