Web Standard implementation _javascript skills for page bar

The page bar is one of the most common components on a Web page, with a web2.0 standard example of the page bar and a brief analysis. The interface effect of this page bar is as shown in the following illustration:

This page bar component has the following characteristics:

1. Regardless of the current page number, the page bar always displays the page number of the first page and the page number of the last page (as shown in the previous illustration). This allows users to know not only how many pages are in total from the last page number, but also how to easily navigate between the last page and the first page.

2, so that the number of page number (ellipsis is also counted) always fixed, such as fixed to 9 . As shown in the following two graphs, the number of pages displayed is 9 when the current page number is 1 or 9(or any other number) . In this way, the position of the next page button is always the same, in doing Ajax paging, the user can click the next page button multiple times in the same place, without moving the mouse because the position of the button is changed, greatly improving the user experience.

3, through the interface parameters can easily set the number of displayed page number. the deviation (offset) parameter of the genpaginationhtml () interface isused to set the number of page numbers displayed to the left or right of the current page number. So, the total number of pages displayed is equal to 2*deviation+1. For example, setting deviation to 4 in this example shows a total of 9 page numbers.

Please comment out the following source code for this example, and then compare the differences between the comments from the interface. You can also compare Google 's paging behavior, and you'll find that the behavior is to annotate the following code from this example. While writing this example, I studied Google 's paging behavior and then gradually expanded.

Copy Code code as follows:

Fixed the total number of yards
if (Curpage-startnum < deviation) {
Endnum + = deviation-(curpage-startnum);
Endnum = endnum > Pagescount? Pagescount:endnum;
}
if (Endnum-curpage < deviation) {
Startnum-= deviation-(endnum-curpage);
Startnum = Startnum < 1? 1:startnum;
};

Finally, the interface parameters of genpaginationhtml (Rowscount, PageSize, Curpage, topage, deviation) are described as follows:
Rowscount (number): Total records.
PageSize (number): How many records are displayed per page.
Curpage (number): current page page numbers.
ToPage (String): A function name that implements the logic that jumps to the specified page.
Deviation: The number of page numbers displayed to the left or right of the current page number.

Page-Bar Sample Downloads