如何使用jsp在spring boot web應用中實現分頁前端

Question

我已經閱讀了許多分頁示例，幾乎所有示例都是作為 Rest 服務我沒有找到任何作為網頁前端實現的示例。 所以到現在為止，我已經學會了如何在后端實現分頁。 我在Controller 、 Service 、 Repository有適當的方法，並且我從數據庫（MySQL）中獲取結果值。
我的存儲庫擴展了 JpaRepository，我正在使用 pageable 實現分頁。 下面是我的控制器、服務、存儲庫中的方法。

在存儲庫類中

Page<SlUrl> findAllByOrderByCreationDateDesc(Pageable pageable);

在 Service 類中（subtractPageByOne 是因為 index 從 0 開始，而 url 參數將從 1 開始）

public Page<SlUrl> getUrlsByPage(int pageNumber, int numberOfElementsPerPage) {

        return urlRepository.findAllByOrderByCreationDateDesc(PageRequest.of(subtractPageByOne(pageNumber), numberOfElementsPerPage));
    }

    private int subtractPageByOne(int page) {
        return (page < 1) ? 0 : page - 1;
    }

在控制器類中

@GetMapping("/urls")
    public ModelAndView openPageableUrls(ModelAndView mv, @RequestParam(defaultValue = "0") int page) {
        System.out.println("Inside /urls");
        Page<SlUrl> urls = slUrlService.getUrlsByPage(page, 5);
        List<SlUrl> urlList = urls.getContent();
        System.out.println("Url count = " + urls.getSize()
                + " Number = " + urls.getNumber() + "");

        mv.setViewName("userlinks");

        for (int i = 0; i < urlList.size(); i++) {
            System.out.println("\nURLs Details:"
                    + "\nid = " + urlList.get(i).getId()
                    + "\nid = " + urlList.get(i).getDestinationUrlLink()
                    + "\nid = " + urlList.get(i).getShortUrlLink()
                    + "\nid = " + urlList.get(i).getUser().getUsername());
        }

        return mv;
    }

你可以看到我有一個for循環來顯示 SlUrl 的細節，它工作正常。 現在我的問題是在前端（JSP 頁面）上顯示上述詳細信息的最佳方式是什么。 我想到的一種方法是傳遞這個urlList並使用 for-each 循環來顯示數據。 但這些數據只是為了舉例，如果我必須實現像博客這樣的東西或顯示版本歷史。

那么如何在前端最好地表示數據。 代碼示例將非常有幫助。

Answer 1

為可能來到這篇文章的其他用戶回答我自己的問題。
我發現這個 GitHub 存儲庫實現了分頁，但它使用的是thymeleaf模板而不是 JSP 頁面。 因此，從該存儲庫中，我為 JSP 頁面構建了分頁。

這是提供有關頁面的所有信息的 Pager util 類

package packageNameHere;


import org.springframework.data.domain.Page;

/**
 * @author Inzimam Tariq
 */
public class Pager {

    private final Page<SlUrl> urls;

    public Pager(Page<SlUrl> urls) {
        this.urls = urls;
    }

    public int getPageIndex() {
        return urls.getNumber() + 1;
    }

    public int getPageSize() {
        return urls.getSize();
    }

    public boolean hasNext() {
        return urls.hasNext();
    }

    public boolean hasPrevious() {
        return urls.hasPrevious();
    }

    public int getTotalPages() {
        return urls.getTotalPages();
    }

    public long getTotalElements() {
        return urls.getTotalElements();
    }

    public Page<SlUrl> getSlUrls() {
        return urls;
    }

    public boolean indexOutOfBounds() {
        return getPageIndex() < 0 || getPageIndex() > getTotalElements();
    }

}

現在在控制器中，我將頁面和尋呼機信息傳遞給 ModelAndView。 整個方法看起來像這樣

@GetMapping("/urls")
    public ModelAndView openPageableUrls(ModelAndView mv, HttpServletRequest request,
            @RequestParam(defaultValue = "0") int page) {
        System.out.println("Inside /urls");
        Page<SlUrl> urls = slUrlService.getUrlsByPage(page, 5);
        List<SlUrl> urlList = urls.getContent();
        System.out.println("Url count = " + urls.getSize()
                + " Number = " + urls.getNumber() + " Elements = " + urls.getNumberOfElements());
        Pager pager = new Pager(urls);

        mv.addObject("baseUrl", AppUtils.getBaseUrl(request));
        mv.addObject("pager", pager);
        urls.getTotalPages();
        mv.addObject("page", urls);
        mv.setViewName("pagination");

        for (int i = 0; i < urlList.size(); i++) {
            System.out.println("\nURLs Details:"
                    + "\nid = " + urlList.get(i).getId()
                    + "\nid = " + urlList.get(i).getDestinationUrlLink()
                    + "\nid = " + urlList.get(i).getShortUrlLink()
                    + "\nid = " + urlList.get(i).getUser().getUsername());
        }

        return mv;
    }

這是我的 pagination.jsp 頁面，我在其中遍歷數據（在本例中為 URL）

<div class="container-fluid d-flex flex-column align-items-center justify-content-center"><br>
     <h1 class="display-4 d-md-display-4"><b>Title_Here</b></h1>
     <p>This is a long test text for demo paragraph.</p>

     <table class="table table-responsive table-striped table-hover table-bordered" style='vertical-align:middle'>
         <thead class="thead-dark">
             <tr>
                <th>Id</th>
                <th>Destination Url</th>
                <th>Short URL</th>
                <th>Actions</th>
             </tr>
         </thead>
         <tbody>
            <c:forEach var="links" items="${page.content}">
                <tr>
                <td>${links.getId()}</td>
                <td>${links.getDestinationUrlLink()}</td>
                <td>${links.getShortUrlLink()}</td>
                <td id="copyTd_${links.getId()}" hidden="">
                    <input type="text" id="${links.getId()}" value="${baseUrl}/${links.getShortUrlLink()}">
                </td>
                <td><button type="submit" id="copy_${links.getId()}" 
                           class="btn btn-success btn-block" 
                                                        onclick="copyShortLink(${links.getId()})"  data-toggle="tooltip" data-placement="top" title="Click to copy shortlink!">
                      Copy
                    </button>

                </td>
              </tr>
            </c:forEach>
          </tbody>
   </table>                   

   <div class="d-flex flex-row align-items-center">
      <c:if test="${pager.hasPrevious()}">
           <button type="submit" class="btn btn-primary btn-md" style="margin: 2px"
                   onclick="location.href = 'urls?page=1'">&laquo; first</button>
           <button type="submit" class="btn btn-primary btn-md" style="margin: 2px"
                    onclick="location.href = 'urls?page=${pager.getPageIndex() - 1}'">previous</button>
      </c:if>

      <c:if test="${pager.getTotalPages() != 1}">
            <label style="margin: 2px 8px 2px 8px">
                   Page ${pager.getPageIndex()} of  ${pager.getTotalPages()}
            </label>
      </c:if>

      <c:if test="${pager.hasNext()}">
            <button type="submit" class="btn btn-primary btn-md" style="margin: 2px"
                   onclick="location.href = 'urls?page=${pager.getPageIndex() + 1}'">next</button>
            <button type="submit" class="btn btn-primary btn-md" style="margin: 2px"
                   onclick="location.href = 'urls?page=${pager.getTotalPages()}'">last &raquo;</button>                                    
      </c:if>
    </div>

</div>