我正在用springboot在intellij上做一个简单的项目,我做了一个带有搜索输入的表。我想要的是显示一条消息时,搜索失败,没有找到结果。我该怎么做?
这是我的table:
<div>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="tablePatients" width="100%" border="1px solid black" class="table table-striped">
<thead class = "thead-dark">
<tr>
<th>Id</th>
<th>Nome</th>
<th>Cognome</th>
</tr>
</thead>
<tbody id="mytable">
<tr th:each="patient : ${allPatients}">
<td th:text="${patient.id}">1</td>
<td th:text="${patient.name}">w</td>
<td th:text="${patient.surname}">e</td>
<td> <a href="show?id=10" th:href="@{show(idPatient=${patient.id} , idDoctor=${doctor.id})}"> show </a></td>
<td> <a href="addPrescription?id=10" th:href="@{newPrescription(idPatient=${patient.id} , idDoctor=${doctor.id})}"> add prescription </a></td>
</tr>
</tbody>
</table>
</div>
这是我用于研究的剧本:
<script>
$(document).ready(function () {
$("#myInput").on("keyup", function () { //here #input textbox id
var value = $(this).val().toLowerCase();
$("#mytable tr").filter(function () { //here #table table body id
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
1条答案
按热度按时间qxsslcnc1#
问题是,如何在您使用的模板引擎中做到这一点。这不是一个真正的spring问题,也不是html或javascript问题。
你应该能检查一下
allPatients
是空的,然后呈现一些东西。如果您使用thymeleaf并希望在服务器端执行此操作:如果您想在javascript逻辑中执行此操作,您发布了一个类似于使用jquery的命令,请执行以下操作:
筛选完行后,检查结果是否为空
如果是,则添加另一行以呈现空消息,例如:
如果结果不是空的,请删除
#empty-message
alternativley,你总是可以添加行,但是使用show()
以及hide()
而不是附加和删除。