Spring + Thymeleaf - how to implement pagination for a list -
i developing simple application using spring + thymeleaf. on 1 of pages have list of items needs paginated.
ideally send currpageno (the number of current page) , numofpages (the total number of pages) variables view , rest of work done in there (this presentation issue , has nothing business logic). if, however, cleanest solution require me computation in controller first, accept small evil.
i list of pages in following form.
<prev | 1 | ... | 3 | 4 | 5 | 6 | 7 | ... | 15 | next> i able come following solution. works believe agree messy , hard read.
moreover, in addition currpageno , numofpages had send 2 more variables view. ideal solution not require me that.
firstpageno = math.max(2, currpageno - 2) lastpageno = math.min(numofpages - 1, currpageno + 2) the current version of code follows.
<ul> <li th:if="${currpageno > 1}"> <a th:href="@{/items.html(pageno = ${currpageno - 1})}" href="">< prev</a> </li> <li th:class="${currpageno == 1} ? 'selected'"> <a th:href="@{/items.html(pageno = 1)}" th:if="${currpageno > 1}" href="">1</a> <span th:if="${currpageno == 1}">1</span> </li> <li th:if="${currpageno >= 5}"> ... </li> <li th:each="pageno : ${#numbers.sequence(firstpageno, lastpageno)}" th:class="${currpageno == pageno} ? 'selected'"> <a th:href="@{/items.html(pageno = ${pageno})}" th:if="${pageno != currpageno}" th:text="${pageno}" href="">2</a> <span th:if="${pageno == currpageno}" th:text="${pageno}">2</span> </li> <li th:if="${currpageno <= (numofpages - 4)}"> ... </li> <li th:class="${currpageno == numofpages} ? 'selected'"> <a th:href="@{/items.html(pageno = ${numofpages})}" th:if="${currpageno < numofpages}" th:text="${numofpages}" href="">10</a> <span th:if="${currpageno == numofpages}" th:text="${numofpages}">1</span> </li> <li th:if="${currpageno < numofpages}"> <a th:href="@{/items.html(pageno = ${currpageno + 1})}" href=""> next ></a> </li> </ul> the following list sumarizes issues rid of most. understand of them inherent platform still, list seems quit long , code messy.
- having send precomputed values of
firstpageno,lastpagenoview controller. - having use
<instead of<in expressions. - having use both anchor , span mutually exclusive conditions in order browser not use link current page.
i welcome other suggestions how improve quality of code.
i understand perhaps question better fit code review site, but, thymeleaf seems technology tiny user base yet, expect reasonable answer rather here on stack overflow, has greater user base (i believe).
if, however, such question not welcome here, please consider moving right site instead of closing advice need.
similar solution described in http://www.javacodegeeks.com/2013/03/implement-bootstrap-pagination-with-spring-data-and-thymeleaf.html
but without using wrapper around spring pageable
<div class="table-pagination"> <ul class="pagination"> <li th:class="${contactspage.number eq 0} ? 'disabled' : ''"> <a th:if="${not contactspage.firstpage}" th:href="@{${'/contacts'}(page=${contactspage.number-1},size=${contactspage.size})}">previous</a> <a th:if="${contactspage.firstpage}" href="javascript:void(0);">previous</a> </li> <li th:each="pageno : ${#numbers.sequence(0, contactspage.totalpages - 1)}" th:class="${contactspage.number eq pageno}? 'active' : ''"> <a th:if="${contactspage.number eq pageno}" href="javascript:void(0);"> <span th:text="${pageno + 1}"></span> </a> <a th:if="${not (contactspage.number eq pageno)}" th:href="@{${'/contacts'}(page=${pageno},size=${contactspage.size})}"> <span th:text="${pageno + 1}"></span> </a> </li> <li th:class="${contactspage.number + 1 ge contactspage.totalpages} ? 'disabled' : ''"> <a th:if="${not contactspage.lastpage}" th:href="@{${'/contacts'}(page=${contactspage.number+1},size=${contactspage.size})}">next</a> <a th:if="${contactspage.lastpage}" href="javascript:void(0);">next</a> </li> </ul> </div>
Comments
Post a Comment