Implementation Code of Pager Based on JQuery

Source: Internet
Author: User

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:

<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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.