как реализовать интерфейс пагинации в веб-приложении с весенней загрузкой, используя jsp

Question

Я прочитал много примеров нумерации страниц, и почти все из них - как Службы Отдыха. Я не нашел ни одного примера, который реализован как интерфейс веб-страницы. Так что до сих пор я узнал, как реализовать нумерацию страниц на серверной части. У меня есть подходящие методы в Controller, Service, Repository, и я получаю полученные значения из базы данных (MySQL).
Мой репозиторий расширяет JpaRepository, и я реализую нумерацию страниц с помощью pageable , Ниже приведен метод в моем Controller, Service, Repository.

В классе Repository

Page<SlUrl> findAllByOrderByCreationDateDesc(Pageable pageable);

В классе Service (subtractPageByOne, потому что индекс начинается с 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;
    }

А в классе Controller

@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 l oop, чтобы показать детали SlUrl, что он работает нормально. Теперь мой вопрос заключается в том, как лучше всего показать вышеупомянутые детали в интерфейсе (JSP страница). Один из способов, которым я думаю, - передать это urlList и использовать для каждого l oop, чтобы показать данные. Но эти данные только для примера, что если мне нужно реализовать что-то вроде блога или показать историю версий.

Итак, как лучше всего представить данные на внешнем интерфейсе. Пример кода был бы очень полезен.

Answer 1

Отвечая на мой собственный вопрос для других пользователей, которые могут прийти к этому сообщению.
Я нашел этот репозиторий GitHub , который реализует нумерацию страниц, но использует шаблон thymeleaf вместо JSP страниц. , Итак, из этого хранилища я построил нумерацию страниц на JSP.

Вот класс утилит Pager, который предоставляет всю информацию о страницах

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

И вот моя страница. Страница 1017 *, где я перебираю данные (в данном случае 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>