Datatables插件從Web服務（.net）加載json數據錯誤

Question

我正在嘗試在我的網站表單上使用DataTables（從Ajax獲取數據）。 我遇到了一些困難，因此我退后一步，嘗試在一個非常基本的表上實現DataTables。

但是，即使在此基本表上，我也無法使數據表工作。 我想念什么？ :(

$(document).ready(function () {
    $('#table_id_example1').DataTable({
        "processing": false,
        "serverSide": false,
        "ajax": {
            type: "POST",
            url: "AjaxTest.asmx/HelloWorld",
            contentType: "application/json; charset=utf-8",
            data: {},
            //dataSrc: "" ,
            dataType: "json",
            success: function (json) {
                alert(json.d);
            },
        },
        "columns": [
            { title: "ID"},
            { title: "Name"},
            { title: "Email"},
            { title: "Extension"}
        ],
    });
})

頁面加載時，數據表始終顯示“正在加載”。

然后我加了

success: function (json) {
    alert(json.d);

這將警告以下內容：

[{ “ID”：1， “名稱”： “傑克”， “電子郵件”： “jack@test.com”， “擴展”： “1001”}，{ “ID”：2， “名稱”：“邁克”， “電子郵件”： “mike@test.com”， “擴展”： “1002”}，{ “ID”：3， “名”： “玫瑰”， “電子郵件”： “rose@test.com” “擴展”： “1003”}]

它返回json字符串正確嗎？ 還是我的數據表參數設置錯誤？

Answer 1

您無需在datatables ajax中添加成功回調，只需將列與適當的鍵（例如，

$('#table_id_example1').DataTable({
    "processing": false,
    "serverSide": false,
    "ajax": {
         url: "AjaxTest.asmx/HelloWorld",
         dataSrc: "d" , // add data source, in your case it is d
     },
     "columns": [
        { title: "ID",data:'d.id'}, /// bind data with their keys
        { title: "Name",data:'d.Name'},
        { title: "Email",data:'d.Email'},
        { title: "Extension",data:'d.Extension'}
     ],
});

請參考ajax配置以獲得更多詳細信息。

Answer 2

如果您目前沒有任何搜索參數，只需按照以下方式指定用於數據加載的網址：

 "ajax": {
           "url": "AjaxTest.asmx/HelloWorld"
         },

而不是您的：

"ajax": {
        type: "POST",
        url: "AjaxTest.asmx/HelloWorld",
        contentType: "application/json; charset=utf-8",
        data: {},
        //dataSrc: "" ,
        dataType: "json",
        success: function (json) {
            alert(json.d);
        },

我寫過有關將數據表與服務器端分頁一起使用的文章，它們可以在以下位置進行搜索：

https://www.codeproject.com/Articles/1118363/GridView-with-Server-Side-Filtering-Sorting-and-Pa

https://www.codeproject.com/Articles/1170086/Grid-with-Server-Side-Advanced-Search-using-JQuery

https://www.codeproject.com/Articles/1191769/Grid-View-with-AJAX-based-CRUD-Operations-in-ASP-N

Answer 3

謝謝大家 將json.d轉換為js對象后可以工作

  $(document).ready(function () { $('#table_id_example1').DataTable({ "processing": false, "serverSide": false, "ajax": { type: "POST", url: "AjaxTest.asmx/HelloWorld", contentType: "application/json; charset=utf-8", dataType: "json", ////data: {}, dataSrc: function (json) { return $.parseJSON(json.d); }, //success: function (json) { // alert(json.d); // //alert(JSON.stringify(json.d)) //} //}, }, "columns": [ { title: "ID",data:"id"}, { title: "Name", data: "Name" }, { title: "Email", data: "Email" }, { title: "Extension", data: "Extension" } ], }); })