考虑2种情况,一种总页数>7,另一种<=7。
还考虑一下,当处于第一页时,previous button不显示,当处于最后一页时,next button不显示。
<div class="ui right floated pagination mini menu" th:if="${totalPages} gt 7">
<!-- previous -->
<a th:if="${pageable.pageNumber-1} != -1" class="icon item" href="javascript:void(0);" th:classappend="${pageable.pageNumber}==0 ? 'disabled' : ''"
th:onClick="|window.scenario.pageable('${url}',${pageable.pageNumber-1},${pageable.pageSize})|">
<i class="angle double left icon"></i>
</a>
<!-- first -->
<a class="icon item" href="javascript:void(0);" th:class="${pageable.pageNumber+1}==1? 'icon link item active':'icon link item'" th:onClick="|window.scenario.pageable('${url}',0,${pageable.pageSize})|">1</a>
<!-- current <=4 -->
<a th:if="${pageable.pageNumber+1} le 4" th:each="i : ${#numbers.sequence(2, 5)}"
th:class="(${i}==${pageable.pageNumber+1})? 'icon link item active':'icon link item'" th:text="${i}"
href="javascript:void(0);" th:onClick="|window.scenario.pageable('${url}',${i-1},${pageable.pageSize})|" ></a>
<div class="item" th:if="${pageable.pageNumber+1} le 4">...</div>
<!-- last-current<=3 -->
<div class="item" th:if="${totalPages -(pageable.pageNumber+1)} le 3">...</div>
<a th:if="${totalPages -(pageable.pageNumber+1)} le 3" th:each="i : ${#numbers.sequence(totalPages-4, totalPages-1)}"
th:class="(${i}==${pageable.pageNumber+1})? 'icon link item active':'icon link item'" th:text="${i}"
href="javascript:void(0);" th:onClick="|window.scenario.pageable('${url}',${i-1},${pageable.pageSize})|" ></a>
<!-- last-current>3 && current >4 -->
<div class="item" th:if="${((totalPages -1 - pageable.pageNumber) gt 3) && ((pageable.pageNumber+1) gt 4)}">...</div>
<a th:if="${((totalPages -1 - pageable.pageNumber) gt 3) && (pageable.pageNumber+1 gt 4)}" class="icon link active item"
href="javascript:void(0);" th:onClick="|window.scenario.pageable('${url}',${pageable.pageNumber},${pageable.pageSize})|" >[[${pageable.pageNumber+1}]]</a>
<a th:if="${((totalPages -1 - pageable.pageNumber) gt 3) && (pageable.pageNumber+1 gt 4)}" class="icon link item"
href="javascript:void(0);" th:onClick="|window.scenario.pageable('${url}',${pageable.pageNumber+1},${pageable.pageSize})|" >[[${pageable.pageNumber+2}]]</a>
<a th:if="${((totalPages -1 - pageable.pageNumber) gt 3) && (pageable.pageNumber+1 gt 4)}" class="icon link item"
href="javascript:void(0);" th:onClick="|window.scenario.pageable('${url}',${pageable.pageNumber+2},${pageable.pageSize})|" >[[${pageable.pageNumber+3}]]</a>
<div class="item" th:if="${((totalPages -1 - pageable.pageNumber) gt 3) && (pageable.pageNumber+1 gt 4)}">...</div>
<!-- last -->
<a class="icon item" href="javascript:void(0);" th:text="${totalPages}"
th:class="${pageable.pageNumber}==${totalPages-1}? 'icon link item active':'icon link item'"
th:onClick="|window.scenario.pageable('${url}',${totalPages-1},${pageable.pageSize})|">1</a>
<!-- next -->
<a th:if="${pageable.pageNumber+1} < ${totalPages}" class="icon item" href="javascript:void(0);" th:classappend="${pageable.pageNumber}==${totalPages-1} ? 'disabled' : ''"
th:onClick="|window.scenario.pageable('${url}',${pageable.pageNumber+1},${pageable.pageSize})|">
<i class="angle double right icon"></i>
</a>
</div>
<div class="ui right floated pagination mini menu" th:if="${totalPages} le 7">
<a th:if="${pageable.pageNumber-1} != -1" class="icon item" href="javascript:void(0);" th:classappend="${pageable.pageNumber}==0 ? 'disabled' : ''"
th:onClick="|window.scenario.pageable('${url}',${pageable.pageNumber-1},${pageable.pageSize})|">
<i class="left angle double icon"></i>
</a>
<a th:each="i : ${#numbers.sequence(1, totalPages)}" th:class="(${i-1}==${pageable.pageNumber})? 'icon link item active':'icon link item'" th:text="${i}"
href="javascript:void(0);" th:onClick="|window.scenario.pageable('${url}',${i-1},${pageable.pageSize})|" ></a>
<a th:if="${pageable.pageNumber+1} < ${totalPages}" class="icon item" href="javascript:void(0);" th:classappend="${pageable.pageNumber}==${totalPages-1} ? 'disabled' : ''"
th:onClick="|window.scenario.pageable('${url}',${pageable.pageNumber+1},${pageable.pageSize})|">
<i class="angle double right icon"></i>
</a>
</div>