Spring boot - bootstrap 和 thymeleaf 排序表
Posted
技术标签:
【中文标题】Spring boot - bootstrap 和 thymeleaf 排序表【英文标题】：Spring boot - bootstrap and thymeleaf sort table 【发布时间】：2020-11-08 10:00:45 【问题描述】：我有一个 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。在您的控制器中，您对存储值的集合进行排序、更新模型并重新加载视图。 【参考方案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>
【讨论】：
以上是关于Spring boot - bootstrap 和 thymeleaf 排序表的主要内容，如果未能解决你的问题，请参考以下文章
Spring Boot 中application.yml与bootstrap.yml的区别
用于发送电子邮件的 Spring Boot API 和 thymeleaf + bootstrap
Bootstrap 4 webjar css 不适用于 Spring Boot + Thymeleaf
Spring boot、JavaMailSender、Thymeleaf 和 Bootstrap：收到的电子邮件是一个纯 HTML 页面