Sorting\Ordering 使用 thymeleaf 的数据

Question

我正在开发一个包含课程的虚拟学习平台。目前，我有一些课程，现在我想按标题对它们进行升序或降序排序。现在我无法将 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>

这是控制器：

@Controller
public class CoursesController {
    private CourseService courseService;

    @Autowired
    public CoursesController(CourseService courseService) {
        this.courseService = courseService;
    }

    @GetMapping("courses")
    public String showCoursesPageSorted(Model model,@RequestParam(defaultValue = "0") int page, @RequestParam(defaultValue = "titleAsc") String sortBy){
        model.addAttribute("allCourses", courseService.findBy(page,sortBy));
        model.addAttribute("currentPage",page);
        model.addAttribute("currentSort",sortBy);
        return "courses";
    }

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

Answer 1

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

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

并按如下方式使用。

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

Answer 2

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

存储库

首先，您不需要单独的存储库方法（如您在评论中所示）来按不同领域对课程进行排序。相反，有一种方法采用过滤条件（如果有）和 Pageable。 Pageable 有 page (int), size(int), and sort(object) 个字段。

Page<Course> findCourses(Pageable pageable);

控制器

Pageable 是手动创建的

在 Controller 方法中，采用单独的参数：page, size, sort 或 Pageable。如果您有一个 Pageable 对象，请使用它来调用存储库方法。如果你有来自前端的单独参数，请自己构造 Pageable:

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
}

Pageable 在控制器中可用

如果您想依靠 Spring 直接在控制器中获取 Pageable 对象，请确保传递这些请求参数 - page, size, and sort（示例：page=0&size=10&sort=rating,asc）。如果需要，可以多次传递排序参数以按多个字段排序。

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

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

未来扩展

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

Sorting\Ordering 使用 thymeleaf 的数据

Sorting\Ordering data using thymeleaf

spring

jpa

selected

option

thymeleaf