如何在页面加载及选默认项时隐藏DataTables表格数据仅显示表头？

核心思路 #

• 初始化表格时隐藏所有数据行，只保留表头展示
• 针对筛选条件做分支处理：选中“Location”时清空表格数据；其他条件下恢复原始数据并执行筛选

具体代码修改 #

1. 表格初始化调整

在DataTables初始化时，通过initComplete回调完成初始隐藏行和原始数据备份：

var table = $('#example').DataTable({
  initComplete: function() {
    // 初始隐藏所有数据行
    this.api().rows().nodes().to$().hide();
    // 备份原始数据，避免筛选后数据丢失
    window.originalData = this.api().rows().data().toArray();
  }
});

2. 筛选逻辑优化

修改下拉框的change事件处理函数，添加清空表格的逻辑：

$('#filter').on('change', function() {
  var filterVal = $(this).val();
  var api = table.api();

  if (filterVal === 'Location') {
    // 清空表格tbody内容，仅保留表头
    api.clear().draw();
  } else {
    // 恢复原始数据后执行筛选
    api.clear().rows.add(window.originalData).draw();
    api.column(2).search(filterVal).draw();
  }
});

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>DataTables Test</title>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>
<body>
  <select id="filter">
    <option value="Location">Location</option>
    <option value="London">London</option>
    <option value="New York">New York</option>
    <option value="Paris">Paris</option>
  </select>
  <table id="example" class="display" style="width:100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>London</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
      </tr>
    </tbody>
  </table>

  <script>
    $(document).ready(function() {
      var table = $('#example').DataTable({
        initComplete: function() {
          this.api().rows().nodes().to$().hide();
          window.originalData = this.api().rows().data().toArray();
        }
      });

      $('#filter').on('change', function() {
        var filterVal = $(this).val();
        var api = table.api();

        if (filterVal === 'Location') {
          api.clear().draw();
        } else {
          api.clear().rows.add(window.originalData).draw();
          api.column(2).search(filterVal).draw();
        }
      });
    });
  </script>
</body>
</html>

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