Jquery plug-in jquery pager to implement JavaScript Paging

Page paging is the most familiar to programmers. In web development, page paging is often required. The jquery plug-in jquery pager can easily implement the Javascript paging function, and only a few lines of code are required, javascript paging is easy to handle,Instance EffectFigure below

Instructions for use
The jquery library file and the jquery pager library file must be used (current version 1.1)

Material Preparation
The CSS style file of the page splitter. You can copy the following CSS style and name itPager. CSS

1. # Pager ul. Pages {
2. Display: block;
3. Border: none;
4. Text-transform: uppercase;
5. Font-size: 10px;
6. Margin: 10px 0 50px;
7. Padding: 0;
8. }
9. # Pager ul. Pages Li {
10. List-style: none;
11. Float: left;
12. Border: 1px solid # CCC;
13. Text-Decoration: none;
14. Margin: 0 5px 0 0;
15. Padding: 5px;
16. }
17. # Pager ul. Pages Li: hover {
18. Border: 1px solid # 003f7e;
19. }
20. # Pager ul. Pages Li. pgempty {
21. Border: 1px solid # Eee;
22. Color: # Eee;
23. }
24. # Pager ul. Pages Li. pgcurrent {
25. Border: 1px solid # 003f7e;
26. Color: #000;
27. Font-weight: 700;
28. Background-color: # Eee;
29. }

Instance code
1. Contains the file section

1. <Link href ="Pager.css"Rel =" stylesheet "type =" text/CSS "/>
2. <SCRIPT src ="Jquery. js"Type =" text/JavaScript "> </SCRIPT>
3. <SCRIPT src ="Jquery. Pager. js"Type =" text/JavaScript "> </SCRIPT>

One CSS style file and two JS library files.

Ii. html Section(The page splitter displays the Div)

1. <H1 id = "result"> excellent blog jquery binder
2. <Div id ="Pager"> </Div>

Iii. Javascript(Jquery plug-in called by jquery pager)

1. <SCRIPT type = "text/JavaScript" Language = "JavaScript">
2. $ (Document). Ready (function (){
3. $ ("#Pager").Pager({Pagenumber: 1,Pagecount: 15,Buttonclickcallback:Pageclick});
4. });
5. Pageclick= Function (pageclickednumber ){
6. $ ("#Pager"). Pager ({Pagenumber: Pageclickednumber,Pagecount: 15, buttonclickcallback: pageclick
7. });
8. $ ("#Result"Pai.html (" the current page number of the jquery Browser "+ pageclickednumber +" page ");
9. }
10. </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 ){}

Jquery plug-in jquery pager page splitter only needs the starting page numberPagenumber, Max number of pagesPagecount, Called when the page number is clickedButtonclickcallbackYou can implement the Javascript paging function by using the function method. In actual application, you only need to make a simple modification to the pageclick method. For example, you can set pagenumber and pagecount as variables, you can pass the page value through the get method, and jquery pager can implement the Javascript paging function. Other functions can be expanded on its own. At the same time, you can implement rich dynamic effects for the jquery plug-in jquery pager buttonclickcallback method, for reference

 

+ ============================================== ========================================================== =====+

 

The following is the Javascript paging code;

Function pagelist (totalnum, pagesize, curpage, URL) {If (curpage <0) curpage = 0; var maxpage = 0; maxpage = parseint (totalnum + pagesize-1)/pagesize ); maxnum = maxpage; If (curpage> 1) {document. write ('<a href = "' + URL +" 1 "+ '"> homepage </a>'); document. write ('<a href = "' + URL + (curpage-1) + '"> previous page </a>');} var start = 1; var end = 11; if (maxpage <= 11) {end = maxpage;} else {If (curpage> 6) {start = curpage-5; end = start + 10 ;} if (curpage> maxpage-6) {start = maxpage-10; end = maxpage ;}}for (VAR I = start; I <= end; I ++) {if (I = curpage) document. write ('<strong>' + I + '</strong>'); else document. write ('<a href = "' + URL + I + '"> [' + I + '] </a>');} If (curpage <maxnum) {document. write ('<a href = "' + URL + (curpage + 1) + '"> next page </a>'); document. write ('<a href = "' + URL + maxnum + '"> last page </a> ');}}
Function pagelist (totalnum, pagesize, curpage, URL) {If (curpage <0) curpage = 0; var maxpage = 0; maxpage = parseint (totalnum + pagesize-1)/pagesize ); maxnum = maxpage; If (curpage> 1) {document. write ('<a href = "' + URL +" 1 "+ '"> homepage </a>'); document. write ('<a href = "' + URL + (curpage-1) + '"> previous page </a>');} var start = 1; var end = 11; if (maxpage <= 11) {end = maxpage;} else {If (curpage> 6) {start = curpage-5; end = start + 10 ;} if (curpage> maxpage-6) {start = maxpage-10; end = maxpage ;}}for (VAR I = start; I <= end; I ++) {if (I = curpage) document. write ('<strong>' + I + '</strong>'); else document. write ('<a href = "' + URL + I + '"> [' + I + '] </a>');} If (curpage <maxnum) {document. write ('<a href = "' + URL + (curpage + 1) + '"> next page </a>'); document. write ('<a href = "' + URL + maxnum + '"> last page </a> ');}}