Pager implementation code based on JQuery_jquery

WBOY

Release： 2016-05-16 18:23:02

Original

1218 people have browsed it

The example rendering is as follows
Pager implementation code based on JQuery_jquery

Instructions for use
You need to use the jQuery library file and the JQuery Pager library file( Current version 1.1)

Material preparation
Paginator CSS style file, you can copy the following CSS style and name it Pager.css

Copy code The 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; 
} 

Example code
1, including file part

Copy code The code is as follows:

One CSS style file and two JS library files.

2. HTML part (paginator display div)

Copy code The code is as follows :

Biyou Blog jQuery Paginator

3. JavaScript part (jQuery plug-in JQuery Pager call)

Copy code The code is as follows:

4. JavaScript code (JQuery Pager call) analysis
(1)$("#pager") .pager({}); part
pagenumber, represents the initial page number, such as: 1
pagecount, represents the total number of pages, such as: 15
buttonClickCallback, represents the method called by clicking the paging number button, such as :PageClick

(2)PageClick = function(pageclickednumber) {} part
PageClick, which represents the function method when customizing the number of clicked pages, such as: function(pageclickednumber){}

The jQuery plug-in JQuery Pager only needs the starting page number pagenumber, the maximum page number pagecount, and the function method of calling buttonClickCallback when the page number is clicked to realize the javascript paging function. In practical applications, only a simple modification of the PageClick method is required. For example, if pagenumber and pagecount are set as variables, the page value can be transferred through the GET method. JQuery Pager can implement the javascript paging function. Others can be extended by themselves. At the same time, the jQuery plug-in JQuery Pager paging buttonClickCallback method can achieve rich dynamic effects. , for reference.
Demo code: http://demo.jb51.net/js/jquery-pager/index.html