Paging case of pure JavaScript -- similar to the visitor Mode

First, we will introduce the visitor mode. Simply put, we have a series of data. Different visitors have different operations on it, but cannot change its data.

In the case of pagination, we use the total number of records, the number of records per page, the current page number, and other data to display the HTML effect. The data is the same, but the display effect needs to be different.

Let's calculate the data first:

VaR splitpage = function (allcount, onepagecount, currpage, styleshownum) {/*** total number of records */This. allcount = allcount;/*** number of records per page */This. onepagecount = onepagecount;/*** current page number */This. currpage = currpage;/** display several rows */This. styleshownum = styleshownum;/*** split into pages */This. pagenum = 0; this. left = 0; this. right = 0; this. showhtml = function (pstyle) {// <a href = 'a. do? P = 1 'class = 'curr'> 1 </a>, 2, 3, 4, 5, 6, 7, 8this. getlimit (); Return pstyle. genhtml (allcount, left, right, currpage, pagenum, onepagecount);} This. getlimit = function () {// calculate the number of pages divided into pagenum = math. ceil (allcount/onepagecount); var half = math. round (styleshownum/2); // If (pagenum <= styleshownum) {left = 1; Right = pagenum ;} // fixed else if (currpage> = pagenum-half) {left = pagenum-styleshownum + 1; Right = pagenum;} // fixed else if (currpage <= half) {left = 1; Right = styleshownum;} // The left and right borders are not fixed. else {left = currpage-half + 1; Right = currpage + math. floor (styleshownum/2 );}}}

For example, Eight dots, 1, 2, 3, 4, 5, 6, 7, and 8 appear on the page.

When you click 1, 2, 3, 4, there is no need to change. Start = 1, end = 8, left side is fixed

When you click 5, you need to change to 2, 3, 4, 5, 6, 7, 8, 9. Start = 2, end = 9, both ends are not fixed

If there are only 10 pages, 3, 4, 5, 6, 7, 8, 9, 10. Click 7, 8, 9, and 10. Start = 3, end = 10, and the right side is fixed.

Therefore, if the parameter sent from the server is P on the current page, we can calculate the start and end points and then display a series of page numbers cyclically.

Note: 8 is a double number. When it is a singular number, it is easier. The left and right sides of the current page are equal, for example, 1, 2, 4, 5.

After calculating the data, how can I display it?

Function pagego (p) {window. Location = "/computers? P = "+ P;} var pagestylea = function () {This. genhtml = function (allcount, start, end, cur, pagenum, onepagecount) {sb = "<span> display number" + (cur-1) * onepagecount + 1) + "-" + cur * onepagecount + "records (total" + allcount + "Records) <a href = \" # \ "onclick = \" pagego (0) \ "" + "class = \" nextpage \ "> homepage </a>"; if (cur <= start) sb + = "<SPAN class = \" uppage \ "> previous page </span> "; elsesb + = "<a href = \" # \ "onclick = \" pagego ("+ (cur-1) + ") \ "" + "class = \" nextpage \ "> Previous Page </A> "; for (I = start; I <= end; I ++) {if (I = cur) sb + = "<SPAN class = \" curr \ ">" + I + "</span> "; elsesb + = "<a href = \" # \ "onclick = \" pagego ("+ I +") \ ">" + I + "</a> "; if (I! = END) {Sb + = "|" ;}} if (cur> = end) sb + = "<SPAN class = \" nextpage \ "> next page </span> "; elsesb + = "<a href = \" # \ "onclick = \" pagego ("+ (cur + 1) + ") \ "" + "class = \" nextpage \ "> next page </a> "; sb + = "<a href = \" # \ "onclick = \" pagego ("+ pagenum + ") \ "" + "class = \" nextpage \ "> last page </a> "; sb + = "<input type = 'text' class = 'skiptxt 'Id = 'txtpagego'/> <input onclick = 'P = document. getelementbyid (\ "txtpagego \"). value; If (P! = \"\"&&! Isnan (p) {pagego (p);} 'Type = 'button 'value = 'jump'/> "; Sb + =" <sctipt "return sb ;}}

Display is to draw HTML based on data

How to Use

<Div class = "pageblock" id = "pageblock"> </div>

var splitPage=new SplitPage(127,10,4,8);document.getElementById('pageBlock').innerHTML=splitPage.showHTML(new PageStyleA());

If you need other display methods,

Create a new pagestyleb class.

CSS:

.pageBlock{ padding:20px 0; text-align:left;}.pageBlock a,.pageBlock span{ padding-right:8px; padding-left:3px;}.pageBlock .upPage{ margin-right:20px;}.pageBlock .nextPage{ margin-left:20px;}.pageBlock span.curr{ font-weight:700; color:#f90;}.pageBlock a{ cursor: pointer;}.pageBlock .skiptxt{ width:50px;}

File Link

Http://pan.baidu.com/share/link? Consumer id = 436216 & UK = 1510139133