When doing project, want to find a simple paging code, lazy to use the front frame and JSON, did not find, wrote a simple
Two variables need to be passed from the background:
Indexpage (Current page)
Totalpage (Total pages)
The effect chart is as follows:
The overall idea is to take the current page as the center, the left three buttons to the right three buttons, one by one to determine the number of pages and-pages when there is no out of range
You need to make a judgment on the first and last page, if the current page equals 1 o'clock, the previous page button fails, and the current page equals the total number of pages, the last page is invalidated
Last code:
Template code is based on bootstrap
<ul class= "Pagination Pagination-lg" > <li th:class= "${indexpage==1}?" Disabled ': ' "><a href=" # "> Previous page </a></li> <li th:if=" ${indexpage-3 >=1} "><a th:href=" @{' admin_law_list.html?page= ' + ${indexpage-3}} ' th:text= ' ${indexpage-3} ' >1</a></li> <li th:if= ' $ {indexPage-2 >=1} ' ><a th:href= ' @{' admin_law_list.html?page= ' + ${indexpage-2}} ' th:text= ' ${indexpage-2} ' >1</a></li> <li th:if= "${indexpage-1 >=1}" ><a th:href= "@{' admin_law_list.html?page= ' + ${" IndexPage-1}} "th:text=" ${indexpage-1} ">1</a></li> <li class=" active "><a href=" # "th:text=" ${indexpage} ' >1</a></li> <li th:if= ' ${indexpage+1 <=totalpage} ' ><a th:href= ' @{' Admin_ Law_list.html?page= ' + ${indexpage+1}} ' th:text= ' ${indexpage +1} ' >1</a></li> <li th:if= ' ${indexpag E+2 <=totalpage} "><a th:href=" @{' admin_law_list.html?page= ' + ${indEXPAGE+2}} "th:text=" ${indexpage +2} ">1</a></li> <li th:if=" ${indexpage+3 <=totalpage} ">< ; a th:href= "@{' admin_law_list.html?page= ' + ${indexpage+3}}" th:text= "${indexpage +3}" >1</a></li> ; Li th:class= "${indexpage==totalpage}?" Disabled ': ' "><a href=" # "> next page </a></li> </ul><br>
Background pass current page and total number of pages