JavaScript imitates the lab paging component, and javascript Paging

JavaScript imitates the lab paging component, and javascript Paging
From my front-end blog, welcome to http://hacke2.github.io
Cause

Cai Ge asked me to restart the neighboring Water Project Server just now. By the way, I reviewed my project last year .. At that time, my task was to manage the dynamic and configuration of the campus. There was a page in the dynamic Park. At that time, I used the lab project: The page components of pan-education. It was all about tailism. Now, I can see that, just like using javascript, there is no technical content, and the design idea is at least seven years ago. directly open a connection with a tag and upload your current page number to the background. When can I create another AJAX job.

Analysis

For example, if there are not many data pages, three buttons are displayed, including the home page, the last page, the last page, and the next page. When the current page is the first one, the top page and the Home Page cannot be clicked. When the current page is the last one, the next and last pages cannot be clicked. There are also the following rules: * if the total number of pages is greater than 10 and the current page is far away from the total number of pages (less than 5), five will be displayed, and the following will be omitted until the last one; * If the total number of pages is greater than 10 and the current page is close to the total number of pages (less than the total number of pages-3), the last four pages are displayed. * In addition to the preceding two cases, the two pages before and after the current page are displayed.

Code

Upload the page to the background to retrieve data. The number of entries displayed on the page is also in the background. Store the tag using array a, which is much faster than String concatenation. StringBuffer is implemented based on this principle.

Function iPage (obj, count, curPage) {var href = 'Article. do? Page = '; var obj = obj; var count = count; var curPage = curPage; var a = []; // the total number of pages is less than 10, more than 10 display the first 3 after 3 middle 3 other .... if (curPage = 1) {. push ('<a href = "#" class = "unclick"> homepage </a>');. push ('<a href = "#" class = "unclick"> previous page </a>');} else {. push ('<a href = "' + href + 1 + '"> homepage </a>');. push ('<a href = "' + href + (curPage-1) + '"> previous page </a>');} // the total number of pages is less than 10if (count <= 10) {for (var I = 1; I <= count; I ++) {createPage (I) ;}} else {if (curPage <= 4) {// the total number of pages is greater than 10 and the current page is far away from the total number of pages (less than 5) for (var I = 1; I <= 5; I ++) {createPage (I );} a. push ('... <a href = "'+ href + count +'"> '+ count +' </a> ')} else if (curPage> = count-3) {// the total number of pages is greater than 10 and the current page is close to the total number of pages (less than the total number of pages-3). push ('<a href = "' + href + 1 + '"> 1 </a>'); for (var I = count-4; I <= count; I ++) {createPage (I) ;}} else {// In addition to the above two cases. push ('<a href = "' + href + 1 + '"> 1 </a>... '); for (var I = curPage-2; I <= curPage + 2; I ++) {createPage (I);}. push ('... <a href = "'+ href + count +'"> '+ count +' </a> ') ;}} if (curPage = count) {. push ('<a href = "#" class = "unclick"> next page </a>');. push ('<a href = "#" class = "unclick"> last page </a>');} else {. push ('<a href = "' + href + (curPage + 1) + '"> next page </a>');. push ('<a href = "' + href + count + '"> last page </a>');} obj. innerHTML =. join (""); // generate page function createPage (I) {if (curPage = I) {. push ('<a href = "' + href + I + '" class = "on">' + I + '</a>');} else {. push ('<a href = "' + href + I + '">' + I + '</a> ');}}}

View the complete DEMO

End

Javascript Paging

Change try-catch in the w () method to the following, which is the inverted paging output.
Try
{
C = t [t. length-1-i]. split ("| ");
Document. write ("" + (t. length-I) + ", Chapter title <a href =" + c [1] + "target = _ blank>" + c [0] + "</a> time" + c [2] + "author" + c [3] + "<br> ");
}
Catch (e)
{
Alert ("I:" + t. length-I + ", B:" + B + ", s:" + s );
}

A piece of javascript paging code

Dizzy, isn't that complicated?

The code for the upstairs (l_jiayou) is normal when two pages are displayed, and three pages are not normal.

Look at me, no matter how you define the number of displays per page and the total number of images are normal

<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> Javascript paging </title>
<Script type = "text/javascript">
Var page = 1;
Var pagesize = 2; // The number displayed on each page
Var picnum = 9; // The total number of images
Var pagenum;
Var showpage = '';
Var showpage1 = '';
Function showpic (no ){
Page = no;
Pagenum = picnum/pagesize;
If (picnum % pagesize> 0) pagenum = parseInt (picnum/pagesize) + 1;
Document. getElementById ("img"). innerHTML = '';
For (I = 1; I <= picnum; I ++ ){
If (I> (page-1) * pagesize & I <= page * pagesize ){
Document. getElementById ("img"). innerHTML + = ' ';
}
}
If (page> 1 ){
Showpage = '<a href = "javascript: showpic (1);"> homepage </a> <a href = "javascript: showpic (' + (page-1) + '); "> previous page </a>'
} Else {
Showpage = '';
}
If (page <pagenum ){
Showpage1 = '<a href = "javascript: showpic (' + (page + 1) + ');"> next page </a> <a href = "javascript: showpic ('+ pagenum +'); "> last page </a>'
} Else {
Showpage1 = '';
}
Document. getElementById ("pages "). innerHTML = 'page times: '+ page +'/<font color = red> '+ pagenum +' </font> total: <font color = red> '+ picnum +' </font> '+ showpage + showpage1 ...... remaining full text>