如何使用jsp在spring boot web应用程序中实现分页前端

Question

我已经阅读了很多分页示例，几乎所有这些都是作为 Rest Services 我没有找到任何作为网页前端实现的示例。所以到现在为止，我已经学会了如何在后端实现分页。我在Controller、Service、Repository 中有适当的方法，并且我正在从数据库（MySQL）中获取结果值。
我的存储库扩展了 JpaRepository，我正在使用可分页实现分页。下面是我的Controller、Service、Repository中的方法。

在存储库类中

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

为可能来到这篇文章的其他用户回答我自己的问题。
我发现this GitHub repository 实现了分页，但它使用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>