Web Standard Implementation of pagination bar

The pagination bar is the most common component on the web page. This blog post provides a web2.0 standard example of the pagination bar and provides a brief analysis. The interface effect of this tab is shown in:

This pagination bar component has the following features:

1. No matter which one the current page number is, the page bar displays the page number on the first page and the page number on the last page, as shown in ). In this way, you can not only know the total number of pages from the last page number, but also conveniently navigate between the last page and the first page.

2. Make the number of displayed pages (the number of omitted characters is also one) always fixed, for example, fixed to 9. As shown in the following two figures, when the current page number is 1 or 9 (or any other number), the number of displayed pages is 9. In this way, the position of the next page button remains unchanged. When Ajax paging is performed, you can click the next page button multiple times at the same position without moving the mouse because of the button position change, this greatly improves the user experience.

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

Please comment out the following source code in this example and compare the differences between the two. You can also compare the paging behavior of Google. You will find that the behavior is to comment out the behavior after the following code in this example. When compiling this example, I studied Google's paging behavior and then gradually evolved and expanded.Copy codeThe Code is as follows: // fixed the total number of codes
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 genPaginationHtml (rowsCount, pageSize, curPage, toPage, deviation) interface parameters are described as follows:
RowsCount (number): Total number of records.
PageSize (number): number of records displayed on each page.
CurPage (number): Current page number.
ToPage (string): A function name that redirects to the specified page.
Deviation (number): number of pages displayed on the left or right of the current page number.

Pagination bar sample download