如何通过HTML和Thymeleaf过滤Spring Boot接口返回的数据且不发起新请求？

完全可行，不需要二次调用后端接口，仅通过前端缓存全量数据集 + DataTable 自定义过滤规则即可实现需求。

实现思路 #

• 首次页面加载时，把后端返回的全量数据集缓存到前端JS变量中，无需依赖后续后端接口调用
• 给切换按钮绑定点击事件，触发时修改全局过滤标记
• 调用DataTable提供的自定义过滤API，基于行原始数据中attributeIWantToFilterOn属性值匹配过滤条件，重新渲染表格即可

完整代码示例 #

页面HTML部分 #

<!-- 过滤切换按钮 -->
<button id="filterToggleBtn" style="margin-bottom: 10px;">仅展示RIGHT类型数据</button>

<!-- DataTable表格结构 -->
<table id="myTable" class="display" width="100%">
  <thead>
    <tr>
      <th>对象ID</th>
      <th>对象名称</th>
      <!-- 如果不需要展示过滤属性，可删除下面这一列，不影响过滤逻辑 -->
      <th>属性类型</th>
    </tr>
  </thead>
</table>

JS逻辑部分 #

// 1. 缓存全量数据：如果是Thymeleaf服务端渲染，直接从模型注入数据
const fullData = /*[[${后端返回的列表模型变量名}]]*/ [];
// 如果是前端异步请求接口拿数据，直接把接口返回的全量数组赋值给fullData即可

// 2. 全局过滤标记，默认展示全部数据
let showOnlyRight = false;

// 3. 初始化DataTable
const dataTable = $('#myTable').DataTable({
  data: fullData,
  columns: [
    { data: 'objectId' },
    { data: 'objectName' },
    { data: 'attributeIWantToFilterOn' }
  ]
});

// 4. 注册DataTable全局自定义过滤规则
$.fn.dataTable.ext.search.push(
  function(settings, searchData, index, rowData) {
    // 未开启过滤时直接返回全部数据
    if (!showOnlyRight) return true;
    // 开启过滤后仅返回属性为RIGHT的行
    return rowData.attributeIWantToFilterOn === 'RIGHT';
  }
);

// 5. 绑定切换按钮点击事件
$('#filterToggleBtn').click(function() {
  // 切换过滤状态
  showOnlyRight = !showOnlyRight;
  // 切换按钮文案提示
  $(this).text(showOnlyRight ? '展示全部数据' : '仅展示RIGHT类型数据');
  // 触发表格重绘，自动应用过滤规则
  dataTable.draw();
});

注意事项 #

• 该方案仅适合全量数据量不大的场景（单页数据小于1万条），如果数据量过大，前端渲染会有性能问题，此时还是建议走后端分页+过滤逻辑
• 过滤属性不需要在表格中展示也可以正常工作，直接删除columns配置中对应的列即可，过滤逻辑会直接读取行原始数据，不受展示列影响

内容的提问来源于stack exchange，提问作者Space Cadet