Web standard implementation of paging bar_javascript skills

The paging bar is the most common component on a web page. This blog post gives a web2.0 standard example of the paging bar and makes a brief analysis. The interface effect of this paging bar is as shown below:

This paging bar component has the following characteristics:

1. Regardless of the current page number, the paging bar always displays the page number of the first page and the page number of the last page (as shown in the picture above). In this way, users can not only know how many pages there are in total from the last page number, but also easily navigate between the last page and the first page.

2. makes the number of displayed page numbers (ellipses count as one) always fixed, for example, fixed at 9. As shown in the two figures below, when the current page number is 1 or 9 (or any other number), the number of displayed page numbers is 9. In this way, the position of the next page button always remains unchanged. When doing Ajax paging, the user can click the next page button multiple times at the same position without having to move because the button position changes. mouse, greatly improving the user experience.

3. The number of displayed page numbers can be easily set through the interface parameters. The deviation (offset) parameter of the genPaginationHtml() interface is used to set the number of page numbers displayed on the left or right side of the current page number. Therefore, the total number of displayed page numbers is equal to 2*deviation 1. For example, in this example, if deviation is set to 4, a total of 9 page numbers will be displayed.

Please comment out the following source code of this example, and then compare the difference between the two before and after commenting on the interface. You can also compare the pagination behavior of Google and you will find that its behavior is the behavior after commenting out the following code in this example. When writing this example I studied the pagination behavior of Google and then gradually evolved and expanded it.

Copy code The code is as follows:

//Make the total code number fixed
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 gives genPaginationHtml(rowsCount , pageSize, curPage, toPage, deviation) interface parameters are described as follows:
rowsCount(number): Total number of records.
pageSize(number): The number of records displayed on each page.
curPage(number): Current page number.
toPage(string): A function name that implements the logic of jumping to the specified page.
deviation(number): The number of page numbers displayed to the left or right of the current page number.

Page bar sample download