如何用jQuery DataTable展示Axios响应数据并解决搜索分页失效问题

你当前的代码逻辑是先初始化jQuery DataTables，再异步加载数据填充表格。DataTables在初始化时只会识别当时DOM中存在的表格行，后续通过Axios动态添加的行不会被DataTables纳入内部数据管理，所以搜索、分页、排序这些依赖内部数据的功能全部失效，搜索时自然显示“No Results Found”。

这里提供两种可行的修复方式，任选一种即可：

方式一：数据填充完成后再初始化DataTables #

将DataTables的初始化代码移到Axios请求成功的回调函数内，确保数据已经渲染到表格后再让DataTables读取数据：

<thead>
  <tr>
    <th class="text-center">Name</th>
    <th class="text-center">Index No</th>
  </tr>
</thead>

<tbody id="tableData" class="text-center"></tbody>

</table>  

<!-- fetch -->
<script>
  axios.get('myFetchAPIHere')
 .then(function(response){
    let finalData = response.data;
    let tableData = "";
    finalData.map((values) => {
        tableData += `<tr class='text-center'>`;
        tableData += `<td class='fw-bolder text-dark'>${values.fullname}</td>`;
        tableData += `<td class='text-primary fw-bolder'>${values.index_no}</td>`;
        tableData += `</tr>`;
    });
    document.getElementById('tableData').innerHTML = tableData;
    
    // 数据渲染完成后初始化DataTables
    let jquery_datatable = $("#table1").DataTable();
 })
 .catch(function(error){
    console.log(error);
 })
</script>

方式二：使用DataTables API添加数据（推荐） #

直接通过DataTables的官方API来添加数据，让它内部维护数据集合，避免手动操作DOM的问题：

<thead>
  <tr>
    <th class="text-center">Name</th>
    <th class="text-center">Index No</th>
  </tr>
</thead>

<tbody id="tableData" class="text-center"></tbody>

</table>  

<!-- fetch -->
<script>
  // 先初始化空的DataTables
  let jquery_datatable = $("#table1").DataTable();

  axios.get('myFetchAPIHere')
 .then(function(response){
    let finalData = response.data;
    // 清空表格现有数据
    jquery_datatable.clear();
    // 遍历数据添加到DataTables
    finalData.forEach((values) => {
        jquery_datatable.row.add([
            values.fullname,
            values.index_no
        ]);
    });
    // 重新绘制表格
    jquery_datatable.draw();
 })
 .catch(function(error){
    console.log(error);
 })
</script>

• 你的原代码中$("#table1").DataTable({)存在语法错误，多了一个左大括号，修复后应为$("#table1").DataTable();（无配置）或带完整配置对象。

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