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”，“ Email”：“ mike@test.com”，“扩展名”：“ 1002”}，{“ id”：3，“ Name”：“ Rose”，“ Email”：“ rose @ test。 com“，”扩展“：” 1003“}]

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

Answer 1

您无需在数据表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。

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" }
                ],
            });
        })

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

3 个答案: