Spring 使用thymeleaf对数据进行排序\排序

我正在开发一个包含课程的虚拟学习平台。目前，我有一些课程，现在我想按标题升序或降序排序。现在我无法将thymeleaf与我的排序功能连接起来

课程Html页面代码：

    <!-- Courses -->

    <div class="courses">
        <div class="container">
            <div class="select">
                <select id="orderSelect" class="form-control input-sm">
                    <option selected value="ratingAsc">Order by Rating Ascending</option>
                    <option value="ratingDesc">Order by Rating Descending</option>
                    <option value="titleAsc"> Order by Title Ascending</option>
                    <option value="titleDesc">Order by Title Descending</option>
                    <option value="totalVotesAsc">Order by Total Votes Ascending</option>
                    <option value="totalVotesDesc">Order by Total Votes Descending</option>
                    <option value="membersAsc">Order by Members Amount Ascending</option>
                    <option value="membersDesc">Order by Members Amount Descending</option>
                </select>
            </div>
            <div class="row courses_row">





                <!-- Course -->
                <div class="col-lg-4 course_col" th:each="course: ${allCourses}">
                    <div class="course">
                        <div class="course_image"><img src="../static/img/course_6.jpg" th:src="@{/img/course_6.jpg}"
                                                       alt=""></div>
                        <div class="course_body">
                            <div class="course_title">
                                <a href="course.html" th:href="@{'/courses/'+${course.id}}" th:text="${course.title}"
                                   th:alt="CourseTitle">
                                    Course title
                                </a>
                            </div>
                            <div class="course_info">
                                <ul>
                                    <li><a href="instructors.html" th:href="@{instructors}">Sarah Parker</a></li>
                                    <li><a href="#" th:alt="Topic">English</a></li>
                                </ul>
                            </div>
                            <div class="course_text">
                                <p th:text="${course.description}" th:alt="Description">Lorem ipsum dolor sit amet,
                                    consectetur adipiscing elit. Fusce enim nulla.</p>
                            </div>
                        </div>
                        <div class="course_footer d-flex flex-row align-items-center justify-content-start">
                            <div class="course_students"><i class="fa fa-user" aria-hidden="true"></i><span>10</span>
                            </div>
                            <div class="course_rating ml-auto"><i class="fa fa-star"
                                                                  aria-hidden="true"></i><span>4,5</span></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row flex-row">
                <ul class="nav-pills">
                    <li class="col-lg-4 mt-auto"
                        th:each="i:${#numbers.sequence(0,allCourses.totalPages -1)}">
                        <a th:href="@{/courses(page=${i})}" th:text="${i+1}" class="nav-link"
                           th:classappend="${currentPage}==${i}?'active':''"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

---

到目前为止，我找到的唯一解决方案是为每个过滤器创建一个新的HTML页面，但它看起来并不正确。

我建议您在控制器端进行所有排序。但如果您仍然想使用thymeleaf进行排序，可以使用thymeleaf提供的实用方法

${#lists.sort(list)}
${#lists.sort(list, comparator)}

并使用如下

<div class="col-lg-4 course_col" th:each="course:${#lists.sort(allCourses)}">

---

我看到您计划提供数据库分页和排序支持。这是增长数据的可靠方法

存储库

首先，您不需要使用单独的存储库方法（如您在注释中所示）按不同字段对课程进行排序。取而代之的是，有一个方法可以接受筛选条件（如果有的话）和

Pageable

<代码>可分页具有

页面（int）、大小（int）和排序（object）

字段

Page<Course> findCourses(Pageable pageable); 

控制器中提供了可分页功能

如果您希望依靠Spring直接在控制器中获取可分页对象，请确保传递这些请求参数-

页面、大小和排序

（例如：

页面=0&size=10&sort=rating，asc

）。如果需要，可以多次传递sort参数以按多个字段进行排序

public String getCourses(Model model, Pageable pageable){
  // Some code
  repository.findCourses(pageable);
  // Rest of the code
}

现在，要以分页方式显示课程并按不同字段排序，您只需要一个HTML页面和一个网格

未来扩展

---

将来，您还可以添加搜索课程。在这种情况下，您必须在控制器和存储库中添加搜索条件字段

最好的选择是在数据库查询级别（best）或对象级别（good）进行排序。我在CourseRepository接口中使用JpaRepository进行排序，如下所示：公共接口CourseRepository扩展JpaRepository{Course getById（长id）；Page findAllByOrderByAvgRatingDesc（可分页）；pagefindallbyrderbyavgratingasc（可分页）；pagefindallbyrderbytotalvotesasc（可分页）；pagefindallbyrderbytotalvotesdesc（可分页）；pagefindallbyrderbytitleasc（可分页）；pagefindallbyrderbytitledesc（可分页）；}感谢您的详细回答。此方法是否为所有页面提供排序？我的意思是，我不知道如何让它对所有页面中的所有课程进行排序。当前，当我请求按标题对课程进行排序时，例如，它会对第一页进行排序，但当我转到第二页时，课程不会排序。@IvanNickSim yes，这将对所有页面的数据进行排序。

public String getCourses(Model model, @RequestParam(defaultValue = "0") int
    page, @RequestParam(defaultValue = "0") int size, 
    @RequestParam(defaultValue = "title") String sortBy){
    // Some code
    Pageable pageable = PageRequest.of(page, size, Sort.by(sortBy).ascending());
    repository.findCourses(pageable);
    // Rest of the code
}

public String getCourses(Model model, Pageable pageable){
  // Some code
  repository.findCourses(pageable);
  // Rest of the code
}