html - リストを分割し、その内容を複数のページに表示する

Question

j2ee を使用して Web アプリを構築しようとしています。テーブルにアイテムのリストを表示しようとしていますが、25 を超えるアイテムが返されると、リストが複数のページに分割されます。

例を次に示します。

どうすればいいですか？前もって感謝します。

Answer 1

これを行うには、spring-data を使用できます。レコードを表示する jsp コード:

<c:forEach var="user" items="${page.content}">
   <p>${user.name}</p>
</c:forEach>

ページネーション コントロールを表示する jsp コード (添付の画像のように):

<c:if test="${page.totalPages > 1}">
    <c:set var="THRESHOLD" value="3" />
    <div class="pagination">
        <ul>
            <c:choose>
                <c:when test="${page.number != 0}">
                    <li><a href="${home}/${targetUrl}?page=${page.number-1}${queryParams}">&larr;</a></li> 
                    <li><a href="${home}/${targetUrl}?page=0${queryParams}">1</a></li>
                    <c:choose>
                        <c:when test="${page.number <  (THRESHOLD + 3)}">
                            <c:forEach var="i" begin="1" end="${page.number}">
                                <c:choose>
                                    <c:when test="${i == page.number}"> 
                                        <li class="current"><span>${i+1}</span></li>
                                    </c:when>
                                    <c:otherwise>
                                        <li><a href="${home}/${targetUrl}?page=${i}${queryParams}">${i+1}</a></li>
                                    </c:otherwise>
                                </c:choose>
                            </c:forEach>
                        </c:when>
                        <c:otherwise>
                            <li><span>...</span></li>
                            <c:forEach var="i" begin="${page.number - THRESHOLD}" end="${page.number}">
                                <c:choose>
                                    <c:when test="${i == page.number}"> 
                                        <li class="current"><span>${i+1}</span></li>
                                    </c:when>
                                    <c:otherwise>
                                        <li><a href="${home}/${targetUrl}?page=${i}${queryParams}">${i+1}</a></li>
                                    </c:otherwise>
                                </c:choose>
                            </c:forEach>
                        </c:otherwise>
                    </c:choose>
                </c:when>
                <c:otherwise>
                    <li class="current"><span>1</span></li>
                </c:otherwise>
            </c:choose>
            <c:if test="${page.number != page.totalPages-1}">
                <c:choose>
                    <c:when test="${(page.totalPages - page.number) <  (THRESHOLD + 3)}">
                        <c:forEach var="i" begin="${page.number+1}" end="${page.totalPages-1}">
                            <li><a href="${home}/${targetUrl}?page=${i}${queryParams}">${i+1}</a></li>
                        </c:forEach>
                    </c:when>
                    <c:otherwise>
                        <c:forEach var="i" begin="${page.number+1}" end="${page.number + THRESHOLD}">
                            <li><a href="${home}/${targetUrl}?page=${i}${queryParams}">${i+1}</a></li>
                        </c:forEach>
                        <li><span>...</span></li>
                        <li><a href="${home}/${targetUrl}?page=${page.totalPages-1}${queryParams}">${page.totalPages}</a></li>
                    </c:otherwise>
                </c:choose>
                <li><a href="${home}/${targetUrl}?page=${page.number+1}${queryParams}">&rarr;</a></li>
            </c:if>
        </ul>
    </div>
</c:if>

${targetUrl} と ${queryParams} をコントローラーの URL と必要なパラメーターに置き換えるだけです

あなたのコントローラー:

    @Autowired
    private UserDAO userDao;

    @RequestMapping(value = "/your-controller-url", method = RequestMethod.GET)
    public String adminUsersList(@RequestParam(required = false) Integer page, Model model) {
        if(page == null) {
            page = 0;
        }
        PageRequest pageReq = new PageRequest(page, "15", new Sort(new Order(Direction.ASC, "id"))); // 15 - is number of items on page
        Page<User> usersPage = userDao.findAll(pageReq);
        model.addAttribute("page", usersPage);
        return "your-view-name";
    }

そして UserDAO:

public interface UserDAO extends JpaRepository<User, Long> {

}

何が起こっているのかをよりよく理解するには、この素晴らしいチュートリアルを読んでください: http://www.petrikainulainen.net/spring-data-jpa-tutorial/