如何使用 Jquery 将 Axios 响应数据显示到 DataTable 中答案

【问题标题】：How to show Axios response data into DataTable using Jquery如何使用 Jquery 将 Axios 响应数据显示到 DataTable 中
【发布时间】：2023-01-31 08:24:46
【问题描述】：

大家好，我有这个问题，我已经尝试修复好几天了。我正在向我的 PHP 服务器发出发布请求以从数据库中获取结果。现在正在使用 JS 映射函数将结果填充到表中。

我正在使用填充和显示结果的 DataTable 但是当我尝试使用 DataTable 搜索 Student 搜索时，一切都消失并显示“未找到结果”

需要帮助进行分页和搜索，排序工作。

我在下面提供了我的脚本和 html 代码

student.ejs //包含学生表的HTML页面

     <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;
    
 })
 .catch(function(error){
    console.log(error);
 })


</script>

<script>
 // Jquery Datatable
 let jquery_datatable = $("#table1").DataTable({)
</script>

【问题讨论】：

标签： axios datatable ejs

【解决方案1】：

执行顺序

您的页面中有两个脚本。第二个脚本初始化您的 JavaScript 数据表：

$("#table1").DataTable();

然而，它正在被执行前第一个脚本完成。

这意味着 DataTables 找到一个空的 <html> 表 - 因此 DataTable 不包含任何数据。当您执行任何 DataTables 操作（如筛选或排序）时，DataTables 会重新显示其数据 - 这是完全没有数据.

你的第一个脚本开始在你的第二个脚本开始之前......但它做的第一件事是使用你的 axios 库发出 Ajax 调用。这是个异步事件 - 所以它等待在执行其.then 函数之前获取响应。

在等待该回调时，第二个脚本运行（如上所述）。

现在，在 Ajax 调用返回其数据后，您的第一个脚本将构建 HTML 表 - 这就是您在网页中看到的内容。

它没有向您展示一个数据表——它只是向您展示一个原始的 HTML 表格。并且（如前所述）这就是为什么在您尝试使用 DataTable 时其所有数据都会消失的原因。

快速解决

最简单的修复是删除第二个脚本，然后放置以下行......

let jquery_datatable = $("#table1").DataTable();

...在 .then 函数的最后：

<script>
$(document).ready(function() {

  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;
      // place the DataTables initialization command here:
      let jquery_datatable = $("#table1").DataTable();
    }); // note how the above command MUST BE INSIDE the "then" function

});
</script>

请注意我是如何将所有内容都包装在 $(document).ready(function() { ... } 中的——这样在页面准备好之前，JavaScript 不会开始运行。

如果您有兴趣，可以通过在代码中添加 console.log() 语句来向自己证明现有代码发生了什么。

例如：

<script>
 
  console.log( 'step 1: ' + Date.now() );

  axios.get('myFetchAPIHere')
 .then(function(response){

    console.log( 'step 2: ' + Date.now() );

    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;

    console.log( 'step 3: ' + Date.now() );
    
 })
 .catch(function(error){
    console.log(error);
 })


</script>

<script>
 // Jquery Datatable

 console.log( 'step 4: ' + Date.now() );

 let jquery_datatable = $("#table1").DataTable({)

 console.log( 'step 5: ' + Date.now() );
</script>

查看浏览器控制台中打印的步骤顺序（F12 打开）。

【讨论】：

只是添加一个脚注：DataTables 内置了对 Ajax 的支持。这意味着（如果你做对了）你可以避免所有这些繁琐的逻辑来构建 HTML 数据字符串。请参阅Ajax sourced data，并且还因为您使用的是 axios，请参阅ajax source as a custom function。您仍然需要处理向表中添加自定义类的问题，但 DataTables 也支持这一点。
尝试修复没有，所以我使用 ajax 而不是 axios 来提取数据。我正在发布修复程序以帮助任何需要它的人

【解决方案2】：

我发现的快速修复：

我删除了 Axios 调用并按照建议使用了 Ajax安德鲁詹姆斯

<script>
   
    // Jquery Datatable
    let jquery_datatable = $("#table1").DataTable({
    
        ajax:{
            url:"Your API CALL",
            type: "GET",
            dataSrc:"",
        },
                
               
        // fetch all the columns in your json object array
        "columns" :[
            {"data" : "fullname"},
            {"data" : "index_no"}
        ]
    })
</script>

【讨论】：