Datatables插件从Web服务（.net）加载json数据错误答案

【问题标题】：Datatables plugin Loading json Data error from web service(.net)Datatables插件从Web服务（.net）加载json数据错误
【发布时间】：2018-12-27 08:15:34
【问题描述】：

我正在尝试在我的网站表单上使用 DataTables（从 Ajax 获取数据）。我遇到了一些困难，所以我退后一步，尝试在一个非常基本的表上实现 DataTables。

但即使在这个基本表上，我也无法让 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"}
        ],
    });
})

当页面加载时，Datatables 总是显示“Loading”。

然后我添加了

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

这会提醒以下内容：

[{"id":1,"Name":"Jack","Email":"jack@test.com","Extension":"1001"},{"id":2,"Name" :"Mike","Email":"mike@test.com","Extension":"1002"},{"id":3,"Name":"Rose","Email":"rose@test. com","扩展名":"1003"}]

返回的 json 字符串正确吗？还是我的 Datatables 参数设置错误？

【问题讨论】：

可以先尝试创建sn-p吗？也许你会自己犯错。
感谢 trincot，我是 stackflow 的新手 :)

标签： c# jquery json

【解决方案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-configuration。

【讨论】：

感谢您的回复。这一次，页面显示不同的错误。 DataTables warning: table id=table_id_example1 - Requested unknown parameter 'd.id' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4
在你的 json 响应中是 id 或 Id，记住大写 I，或者试试 'd.Id'。

【解决方案2】：

如果您目前没有任何搜索参数，只需通过以下方式指定数据加载的url：

 "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

【讨论】：

【解决方案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" }
                ],
            });
        })

【讨论】：