带有 Ajax 函数的 jQuery 数据表在 ajax.reload() 上抛出错误

Posted 2023-05-09

【中文标题】带有 Ajax 函数的 jQuery 数据表在 ajax.reload() 上抛出错误

【英文标题】：jQuery Datatables with Ajax function throws error on ajax.reload()

【发布时间】：2019-12-30 18:37:15

【问题描述】：

我有一个数据表，我正在尝试使用 ajax 函数进行填充。 我还希望能够通过单击按钮重新加载表格。

我正在尝试使用 jQuery 数据表的风格，它允许我使用自定义函数来执行实际的 ajax。它在初始化时正确加载数据，但在我尝试重新加载时抛出错误。

错误：

代码：

HTML：

<button type="button" class="btn btn-primary mb-2" id="SearchBtn">Submit</button>

<table id="ResultsTable" class="display table table-striped table-bordered table-hover" ></table>

JS：

const service = 
  getResults: function() 
    return $.get('https://jsonplaceholder.typicode.com/users');
  


$(function() 
  const dataTableConfig = 
    ajax: async function(data, callback, settings) 
      let response = await service.getResults();
      const formattedResponse = 
        data: response.map(i => Object.values(i))
      ;
      callback(formattedResponse);
    ,
    columns: [
        title: "Name"
      ,
      
        title: "Position"
      ,
      
        title: "Office"
      ,
      
        title: "Extn."
      ,
      
        title: "Start date"
      ,
      
        title: "Salary"
      
    ]
  ;
  const UI = 
    SearchBtn: $("#SearchBtn"),
    ResultsTable: $('#ResultsTable').DataTable(dataTableConfig)
  ;
  UI.SearchBtn.click(function() 
    UI.ResultsTable.ajax.reload();
  );
);

MVCE 错误示例（点击提交按钮查看）：

https://jsfiddle.net/sajjansarkar/bkzahydg/

【参考方案1】：

jQuery.ajax() 默认返回一个延迟对象，您可以使用.then() 而不是 await 来详细说明。因此，您无需将 await/async 与已经异步的行为混为一谈。

我建议将您的 ajax 部分更改为：

ajax: function (data, callback, settings) 
    service.getResults().then(function (response) 
        const formattedResponse = 
            data: response.map(i => Object.values(i))
        ;
        callback(formattedResponse);
    )
,

const service = 
  getResults: function () 
      return $.get('https://jsonplaceholder.typicode.com/users');
  


const dataTableConfig = 
    ajax: function (data, callback, settings) 
        service.getResults().then(function (response) 
            const formattedResponse = 
                data: response.map(i => Object.values(i))
            ;
            callback(formattedResponse);
        )
    ,
    columns: [
        title: "Name"
    , 
        title: "Position"
    , 
        title: "Office"
    , 
        title: "Extn."
    , 
        title: "Start date"
    , 
        title: "Salary"
    
    ]
;
const UI = 
    SearchBtn: $("#SearchBtn"),
    ResultsTable: $('#ResultsTable').DataTable(dataTableConfig)
;
UI.SearchBtn.click(function () 
    UI.ResultsTable.ajax.reload();
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/dataTables.bootstrap4.min.css">


<button type="button" class="btn btn-primary mb-2" id="SearchBtn">Submit</button>
<table id="ResultsTable" class="display table table-striped table-bordered table-hover" ></table>

【讨论】：

非常感谢，它有效。但我不明白为什么我的不。据我所知，service.getResults().then(func) 和let respo = await service.getResults() ; func(resp); 完全一样，估计得再研究一下了。