如何使用JSP在Spring Boot Web应用程序中实现分页前端

Question

我读过很多分页示例，几乎所有示例都是作为 Rest Services 我没有找到任何作为网页前端实现的示例。所以到目前为止，我已经学会了如何在后端实现分页。我在Controller、Service、Repository中都有正确的方法，并且我从数据库(MySQL(中获取结果值。
我的存储库扩展了 JpaRepository，我正在实现可分页的分页。以下是我的控制器、服务、存储库中的方法。

在存储库类中

Page<SlUrl> findAllByOrderByCreationDateDesc(Pageable pageable);

在服务类中(减去PageByOne是因为索引从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

为可能来到这篇文章的其他用户回答我自己的问题。
我找到了这个实现分页但使用的是thymeleaf模板而不是 JSP 页面的 GitHub 存储库。因此，从该存储库中，我构建了JSP页面的分页。

这是寻呼机实用程序类，它提供有关页面的所有信息

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();
}
}

现在在控制器中，我正在将页面和寻呼机信息传递给模型和视图。整个方法看起来像这样

@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;
}

这是我的分页.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>