Статьи

Простой пример разбиения на страницы с данными Spring и Thymeleaf

Сентябрь 16, 2017

Как некоторые из вас знают, нумерация страниц используется для отображения больших наборов результатов. Иногда сложно перечислить все данные одновременно. В этих случаях методы разбиения на страницы используются для разделения и отображения большого набора результатов. В этом уроке я попытаюсь показать вам простой пример разбиения на страницы с Spring Boot, Spring Data и Thymeleaf.

Для этого урока я использую пример веб-приложения Article CRUD, которое я разработал ранее.

Прежде всего, я выбрал Spring Boot 2.0.5.RELEASE, MySQL, Spring Data и Thymeleaf для приложения Article CRUD.

Поэтому перед началом работы необходимо иметь эти зависимости, помимо обычных зависимостей Spring Boot.

<dependency>
    <groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

POJO создается для  Article объекта, как показано ниже:

@Entity
@Table(name = "article")
public class Article {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    @Column(name = "id")
    private long id;
    @Column(name = "url")
    private String url;
    @Column(name = "status")
    private String status;

  //getters and setters
}

Интерфейс DAO, который выходит из CrudRepository, создан. Это то, что имеет значение.

public interface ArticleDao extends CrudRepository<Article, Long> {
    Page<Article> findAll(Pageable pageable);
}

Для распечатки статей с нумерацией страниц создается  Controller метод:

    @RequestMapping(value = "/article-list/page/{page}")
    public ModelAndView listArticlesPageByPage(@PathVariable("page") int page) {
        ModelAndView modelAndView = new ModelAndView("article-list-paging");
        PageRequest pageable = PageRequest.of(page - 1, 15);
        Page<Article> articlePage = articleService.getPaginatedArticles(pageable);
        int totalPages = articlePage.getTotalPages();
        if(totalPages > 0) {
            List<Integer> pageNumbers = IntStream.rangeClosed(1,totalPages).boxed().collect(Collectors.toList());
            modelAndView.addObject("pageNumbers", pageNumbers);
        }
        modelAndView.addObject("activeArticleList", true);
        modelAndView.addObject("articleList", articlePage.getContent());
        return modelAndView;
    }

Вы можете видеть, что в контроллере используется PageRequest объект Spring Data  (org.springframework.data.domain.PageRequest) . Я предпочел передать размер страницы как статический, но я настоятельно рекомендую вам прочитать его из  файла свойств . Я передал этот  PageRequest объект методу в ArticleService. Давайте посмотрим, что находится внутри этого метода обслуживания.

@Service
public class ArticleServiceImpl implements ArticleService {
    @Autowired
    private ArticleDao articleDao;

@Override
    public Page<Article> getPaginatedArticles(Pageable pageable) {
        return articleDao.findAll(pageable);
    }
}

В getPaginatedArticles методе    вызывается findAll(Pageable pageable) метод in  ArticleDao.  ArticleDao«S  findAll метод возвращает запись сортируется по ID с помощью страницы и размера страницы, который мы предоставили в PageRequest объекте. 

В конце концов, у нас есть  Page<Article>  объект в контроллере. Мы получаем список Article, вызывая   метод объекта. И ниже вы можете увидеть, как отображается список статей и как осуществляется разбиение на страницы с помощью Thymeleaf.getContent()Page

    <div class="row" th:fragment="article-list" th:if="${articleList != null && !articleList.isEmpty()}">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <table id="link-list" class="table table-striped table-bordered" style="width:100%">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>URL</th>
                    <th>Status</th>
                    <th>Detail</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="article : ${articleList}">
                    <td th:text="${{article.id}}">1</td>
                    <td th:text="${{article.url}}">http://thegame.org</td>
                    <td th:text="${{article.status}}">PENDING</td>
                    <td><a th:href="@{/article/detail/{articleId}(articleId=${article.id})}">Detail</a></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-2"></div>
    </div>

<div class="row" th:fragment="pagination">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <nav aria-label="Pagination">
                <ul class="pagination justify-content-center">
                    <li class="page-item" th:each="pageNumber : ${pageNumbers}" >
                        <a class="page-link" th:href="@{|/article-list/page/${pageNumber}|}" th:text=${pageNumber}>1</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="col-md-2"></div>
    </div>

Это все! 

Заключение

Теперь у нас есть пример нумерации страниц. Я знаю, что в этом есть некоторые необработанные ошибки, но вы должны использовать и улучшить этот пример. Есть много техник и методов для нумерации страниц. Я только хотел привести пример сегодня

Удачного кодирования!

66
Share: