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

Question

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

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

错误：

代码：

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" width="100%"></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/

Answer 1

jQuery.ajax() by default returns a deferred object you can elaborate with .then() 而不是等待。因此，您不需要将 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" width="100%"></table>

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

jQuery Datatables with Ajax function throws error on ajax.reload()

jquery

jquery-ui

datatables