如何为表研究显示消息“未找到结果”?

r6l8ljro  于 2021-07-24  发布在  Java
关注(0)|答案(1)|浏览(295)

我正在用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)
        });
    });
});
qxsslcnc

qxsslcnc1#

问题是,如何在您使用的模板引擎中做到这一点。这不是一个真正的spring问题,也不是html或javascript问题。
你应该能检查一下 allPatients 是空的,然后呈现一些东西。如果您使用thymeleaf并希望在服务器端执行此操作:

<tr th:if="${#lists.isEmpty(allPatients)}">
  <td>no patients found...</td>
</tr>
<tr th:each="patient : ${allPatients}">
...

如果您想在javascript逻辑中执行此操作,您发布了一个类似于使用jquery的命令,请执行以下操作:
筛选完行后,检查结果是否为空
如果是,则添加另一行以呈现空消息,例如:

$('#mytable').append('<tr id="empty-message"><td>no patients found...</td></tr>');

如果结果不是空的,请删除 #empty-message alternativley,你总是可以添加行,但是使用 show() 以及 hide() 而不是附加和删除。

相关问题