如何用本地JSON填充DataTable并实现多选筛选器？

步骤1：修正AJAX请求错误 #

你原有的AJAX代码存在几处拼写和逻辑错误，先修正：

• jQuery的AJAX方法是$.ajax（不是$ajax）
• 请求参数是小写的url（不是大写URL）
• 成功回调里应该把返回的response赋值给tableData，而非未定义的staff

步骤2：生成HTML表格内容 #

通过遍历JSON数据，动态生成表格的tbody内容，插入到页面的空表格中。

步骤3：复用原示例的多选筛选逻辑 #

在表格内容生成完成后，初始化DataTable并复用原示例的列筛选器代码。

完整代码示例 #

HTML结构（需包含表头、表脚和空表体）

<!-- 引入jQuery和DataTable的依赖（和原示例一致） -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Birthday</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody id="table-body"></tbody>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Birthday</th>
      <th>Email</th>
    </tr>
  </tfoot>
</table>

JavaScript代码

var tableData = [];

// 修正后的AJAX请求
$.ajax({
  method: 'GET',
  url: './data/myJSON.json',
  success: function(response) {
    tableData = response;
    populateTable();
    initDataTableWithFilters();
  },
  error: function(xhr, status, error) {
    console.error('加载JSON数据失败:', error);
  }
});

// 动态生成表格内容
function populateTable() {
  const tbody = document.getElementById('table-body');
  let htmlStr = '';
  
  tableData.forEach(item => {
    const staff = item.staff;
    htmlStr += `
      <tr>
        <td>${staff.Name}</td>
        <td>${staff.Birthday}</td>
        <td>${staff.Email}</td>
      </tr>
    `;
  });
  
  tbody.innerHTML = htmlStr;
}

// 初始化DataTable并添加多选筛选器（复用原示例逻辑）
function initDataTableWithFilters() {
  $('#example').DataTable({
    initComplete: function () {
      this.api().columns().every(function () {
        const column = this;
        const select = $('<select><option value=""></option></select>')
          .appendTo($(column.footer()).empty())
          .on('change', function () {
            const val = $.fn.dataTable.util.escapeRegex($(this).val());
            column.search(val ? `^${val}$` : '', true, false).draw();
          });

        column.data().unique().sort().each(function (d) {
          select.append(`<option value="${d}">${d}</option>`);
        });
      });
    }
  });
}

注意事项 #

1. 确保本地JSON文件路径正确，若直接打开HTML文件可能遇到跨域问题，建议用本地服务器（如VS Code的Live Server插件）运行项目。
2. 依赖的jQuery和DataTable资源需正确引入，版本可根据原示例调整。
3. 若JSON数据中存在特殊字符（如引号），需提前做转义处理，避免HTML渲染错误。

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