如何对动态生成的表行设置限制？答案

【问题标题】：How to set a limit on dynamically generated table rows?如何对动态生成的表行设置限制？
【发布时间】：2017-01-17 23:36:46
【问题描述】：

我有一个动态生成的表，每次刷新页面时都会插入一行新数据。如何限制最多只显示 7 个表行的表，一旦达到 7 个。用数据更新表现有表行而不是添加新行。我的应用程序由前端的 thymeleaf 和后端的 java/springboot 组成。

我在这个脚本中使用百里香叶来自动生成我的代码。

<table th:object="${showbudata}">
    <thead>
    <tr>
        <th> Date </th>
        <th> Status </th>
        <th> HostName </th>
        <th> Implement Version</th>

    </tr>
    </thead>
    <tbody>

  <tr th:each="t: ${showbudata}" th:if="${server.host == t.host}">
    <td th:text="${t.date}" />
    <td th:text="${t.Status}" />
    <td th:text="${t.host}" />
    <td th:text="${t.version}" />
  </tr>

    </tbody>
</table>

【问题讨论】：

这将是 js 逻辑，因此您应该包含更多内容，而不是 html

标签： javascript html css thymeleaf

【解决方案1】：

您需要为您的数据实现命名为pagination。您可能有兴趣查看Thymeleaf Spring Data Dialect。

【讨论】：

我查看了分页，我认为这不是我要找的。span>

【解决方案2】：

当您的页面正在刷新并且您不想跟踪最大行数时，您可以使用 localStorage

var max = 5;
var currentRowsCount = localStorage.get('rowsInsreted') || 0;
if(currentRowsCount < max){
  // insert new row 
  localStorage.setItem("rowsInsreted", currentRowsCount+1));
}

Nice article for localstorage

【讨论】：