Spring boot - bootstrap 和 thymeleaf 排序表答案

【问题标题】：Spring boot - bootstrap and thymeleaf sort tableSpring boot - bootstrap 和 thymeleaf 排序表
【发布时间】：2023-11-18 11:55:01
【问题描述】：

我有一个 Spring Boot 应用程序，它使用 thyemeleaf 进行 html 和 boostrap 进行设计。

我在找可以做以下功能的表

标题中的排序选项。单击它后，根据特定 col 的值对所有行进行排序
允许在特定行中搜索值
限制页面中显示的行。例如。第 1 页显示 30 行，点击 2 显示 30 行

我环顾四周，看到了 Javascript 的用法，但我不确定如何使用 Javascript。如有帮助，请提供任何帮助！

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
    crossorigin="anonymous">
<title>Home</title>
</head>
<body>



    <div class="jumbotron">
    
        <h1 class="display-4">Coronavius tracker application</h1>
    
        <p class="lead">This application tracks the coronavirus situation around the globe</p>

        <hr class="my-4">
        <div class="container">
    
            <div class="row">
                <div class="col">
                    <h3>
                    <p class="font-weight-bold">Total world cases</p>
                    <!--    p tag takes up the entire width -->
                    <p class="font-weight-bold" th:text="${worldCases}"></p>
                    </h3>
                </div>      
            
                <div class="col">
                        <h3>
                    <p class="font-weight-bold">Total world deaths</p>
                    <p class="font-weight-bold"th:text="${worldDeaths}"></p>
                    </h3>
                </div>
                <div class="col">
                <h3>
                    <p class="font-weight-bold">World population</p>
                    <p class="font-weight-bold" th:text="${worldPop}"></p>
                </h3>
                </div>
            </div>
        </div>
    </div>



    <table class="table table-striped">
        <thead>
            <tr>

                <th scope="col">County</th>
                <th scope="col">Total cases</th>
                <th scope="col">New cases</th>
                <th scope="col">Total deaths</th>
                <th scope="col">Population</th>

            </tr>
        </thead>

        <tbody>
            <tr th:each="item :${alldata}">
                <td th:text="${item.country}"></td>
                <td th:text="${item.totalCases}"></td>
                <td th:text="${item.newCases}"></td>
                <td th:text="${item.totalDeaths}"></td>
                <td th:text="${item.pop}"></td>

            </tr>

        </tbody>
    </table>


</body>
</html>

【问题讨论】：

除了关于如何使用 JavaScript 的一般性要求之外，您还不清楚您在这里要问什么。你能把事情缩小到更具体的事情吗？看看DataTables 和其他类似的解决方案——也许这会有所帮助。（否则，这个问题太宽泛了，可能会被关闭。）
因为你不懂 js，让我们把它留给 java，对于你想点击的每个标题，你创建一个非常简单的 onClick（你可以在 html 中这样做）去 /sort /byFooHeader。在您的控制器中，您对存储值的集合进行排序、更新模型并重新加载视图。

标签： spring spring-boot bootstrap-4 thymeleaf

【解决方案1】：

使用数据表，我能够获得具有所需功能的表。我的代码如附件

<!DOCTYPE html>
<!-- To use thymeleaf -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
    crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script language="javascript" type="text/javascript">
    $(document).ready( function () {
        $('#dataTable').DataTable();
    } );
    </script>
<title>Home</title>
</head> 
<body>


    <!--    Creates a big gray field  -->
    <div class="jumbotron">
        <!-- Big words -->
        <h1 class="display-4">Coronavirus tracker</h1>
        <!--   Big words description -->
        <p class="lead">Tracking this pandemic one at a time</p>
    <!--    Marks bottom part of jumbotron   -->
        <hr class="my-4">
        <div class="container">
        <!-- Gride layout with each col detonated by class ="col" -->
            <div class="row">
                <div class="col">
                    <h3>
                    <p class="font-weight-bold">Total world cases</p>
                    <!--    p tag takes up the entire width -->
                    <p class="font-weight-bold" th:text="${worldCases}"></p>
                    <p class="font-weight-bold" th:text="${percentage}"></p>
                    </h3>
                </div>      
            
                <div class="col">
                        <h3>
                    <p class="font-weight-bold">Total world deaths</p>
                    <p class="font-weight-bold"th:text="${worldDeaths}"></p>
                    </h3>
                </div>
                <div class="col">
                <h3>
                    <p class="font-weight-bold">World population</p>
                    <div class="font-weight-bold" th:text="${worldPop}"></div>
                </h3>
                </div>
            </div>
        </div>
    </div>


<!--    @id give id to the table and match the javascript
    @page-length to match the default entries per page
    @data-order to set the default way to display order. It is now 1st col in descending order -->
    <table class="table table-striped" id="dataTable" data-page-length='50' data-order='[[1, "desc"]]'>
        <thead>
            <tr>

                <th scope="col">County</th>
                <th scope="col">Total cases</th>
                <th scope="col">New cases</th>
                <th scope="col">Total deaths</th>
                <th scope="col">Population</th>

            </tr>
        </thead>

        <tbody>
            <tr th:each="item :${alldata}">
                <td th:text="${item.country}"></td>
                <td th:text="${item.totalCases}"></td>
                <td th:text="${item.newCases}"></td>
                <td th:text="${item.totalDeaths}"></td>
                <td th:text="${item.pop}"></td>

            </tr>

        </tbody>
    </table>


</body>
</html>

【讨论】：