Question

我正在使用 ajax 和 jquery 绑定数据表。但我收到类似“DataTables 警告：table id=datatable - JSON 响应无效”之类的错误。

                         $(document).ready(function () {
                             $.ajax({
                             type: "post",
                             url: "../../loader.svc/gettabledata",
                             data: '{}',
                             contenttype: "application/json; charset=utf-8",
                             datatype: "json",
                             success: onsuccess,
                             failure: function (response) {
                             alert(response.d);
                              },
                             error: function (response) {
                             alert(response.d);
                             }
                             });
                             });
                      function onsuccess(responce) {
                       $('#datatable').DataTable(
                       {
                        "ajax":
                         {
                          "datasrc": function (responce) {
                      
                            var jsonObj;
                             jsonObj = $.parseJSON(responce.d)
                       
                               return jsonObj.d;
                               }
                              },
                           "columns": [
                           { "data": "ID" },
                           { "data": "customername" },
                           { "data": "LoginName" }
                             ]
                            });

                           }

响应文本：[{"ID":1,"CustomerName":"John","LoginName":"John"}]"

Answer 1

您有两个 ajax 调用（jQuery 调用和 DataTables 调用），其中只需要一个 ajax 调用。

如果您想使用 jQuery ajax 调用获取数据，您可以使用 DataTables data 选项将该数据传递给 DataTables。为此，您需要将 DataTables ajax 部分替换为 data 选项。

因为我没有您的 JSON 提供程序用于测试，所以我将使用公开可用的“jsonplaceholder”网址：

$(document).ready(function() {

  $.ajax({
    method: "GET",
    url: "https://jsonplaceholder.typicode.com/posts",
    //data: '{}', 
    //contenttype: "application/json; charset=utf-8",
    //datatype: "json",
    success: onsuccess,
    failure: function (response) {
      alert(response.d);
    },
    error: function (response) {
      alert(response.d);
    }
  });

});

function onsuccess(response) {
  //console.log(response);
  $('#example').DataTable( {
    "data": response, // this passes your data to DataTables
    "columns": [
      { "title": "User ID", "data": "userId" },
      { "title": "ID", "data": "id" },
      { "title": "Title", "data": "title" }
    ]
  } );
}

注意下面三行...

data: '{}', 
contenttype: "application/json; charset=utf-8",
datatype: "json",

...不是我的演示工作所严格要求的。

如果您愿意，可以仅使用 DataTables ajax 调用来简化上述方法。在这种情况下，您需要在 DataTable 定义的 ajax 部分使用 dataSrc：

$(document).ready(function() {

  var table = $('#example').DataTable( {
    ajax: {
      method: "GET",
      url: "https://jsonplaceholder.typicode.com/posts",
      dataSrc: ""
    },
    "columns": [
      { "title": "User ID", "data": "userId" },
      { "title": "ID", "data": "id" },
      { "title": "Title", "data": "title" }
    ]
  } );

} );

这给出了与我的第一个例子相同的结果。

次要问题：您的问题中有一个小错误：

"datasrc": function (responce)

应该是dataSrc而不是datasrc。

使用ajax jquery绑定数据表

1 个答案: