Question

我正在努力探索jQuery DataTables库。我终于得到了一个使用Web窗体Web方法的AJAX调用（丑陋的我知道），并且我成功收到了JSON响应，但表是空的。我做错了什么？

我有一个简单的表：

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Project ID</th>
            <th>Project Name</th>
            <th>Project Launch Name</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Project ID</th>
            <th>Project Name</th>
            <th>Project Launch Name</th>
        </tr>
    </tfoot>
</table>

我正在documentready上初始化数据表：

$('#example').dataTable({
    "dom": "frtS",
    "scrollY": "300px",
    "deferRender": true,
    "ajax": {
        "dataType": "json",
        "contentType": "application/json; charset=utf-8",
        "type": "POST",
        "url": "Default.aspx/GetSearchResults",
        "dataSrc": function (json) {
            return $.parseJSON(json.d);
            //return json.d;
        },
        "columns": [
            { "data": "ProjectID" },
            { "data": "ProjectName" },
            { "data": "ProjectLaunchName" }
        ]
    }
});

我的JSON响应有效（根据DataTables规范，JSON需要根'data'对象），例如：

{
    "data": [
        {
            "ProjectID": 100850,
            "ActivityTypeID": 1,
            "ProjectName": "Test Project",
            "ProjectLaunchName": "Test Project",
            "Status": "Deleted"
        }
    ]
}

尽管我已经找到了所有的例子，但我无法让桌子填满。我没有收到任何错误消息，表中只有0行。我错过了明显的东西吗？我试图使用标准json.d响应，而不是解析它，但也失败了。

有什么想法吗？

编辑：

我使用下面的.NET Web窗体WebMethod（再次，我知道很糟糕，但我的手被迫）从服务器返回JSON对象。请注意我如何使用数据对象包装JSON以符合DataTables文档中的规范：

<WebMethod()>
Public Shared Function GetSearchResults() As String
    Dim bo As New Business.ProjectSearch
    Dim searchCriteria As New Entities.ProjectSearchCriteria

    Dim searchResults As List(Of Entities.ProjectSearchResult) = bo.SearchProjects(searchCriteria, 1).Take(10).ToList()

    Dim wrapper = New With {Key .data = searchResults}
    Return JsonConvert.SerializeObject(wrapper)
End Function

完整的JSON响应如下：

{
    "data": [
        {
            "ProjectID": 101296,
            "ActivityTypeID": 1,
            "ProjectName": "Test Project",
            "ProjectLaunchName": "asdasdkljasd",
            "Status": "Active",
            "LaunchDate": null,
            "ProjectClassification": 0,
            "PageUrl": "ProductInnovation.aspx"
        },
        {
            "ProjectID": 101295,
            "ActivityTypeID": 1,
            "ProjectName": "Test project",
            "ProjectLaunchName": "Test project",
            "Status": "Active",
            "LaunchDate": "2020-12-31T00:00:00",
            "ProjectClassification": 0,
            "PageUrl": "ProductInnovation.aspx"
        },
        {
            "ProjectID": 101294,
            "ActivityTypeID": 1,
            "ProjectName": "Test project",
            "ProjectLaunchName": "Test project",
            "Status": "Active",
            "LaunchDate": null,
            "ProjectClassification": 0,
            "PageUrl": "ProductInnovation.aspx"
        },
        {
            "ProjectID": 101293,
            "ActivityTypeID": 1,
            "ProjectName": "Test project",
            "ProjectLaunchName": "Test project",
            "Status": "Active",
            "LaunchDate": "2018-01-31T00:00:00",
            "ProjectClassification": 0,
            "PageUrl": "ProductInnovation.aspx"
        },
        {
            "ProjectID": 101292,
            "ActivityTypeID": 1,
            "ProjectName": "Test project",
            "ProjectLaunchName": "Test project",
            "Status": "Active",
            "LaunchDate": "2017-09-30T00:00:00",
            "ProjectClassification": 0,
            "PageUrl": "ProductInnovation.aspx"
        },
        {
            "ProjectID": 101291,
            "ActivityTypeID": 1,
            "ProjectName": "Test project",
            "ProjectLaunchName": "Test project",
            "Status": "Deleted",
            "LaunchDate": null,
            "ProjectClassification": 4,
            "PageUrl": "ProductInnovation.aspx"
        },
        {
            "ProjectID": 101290,
            "ActivityTypeID": 1,
            "ProjectName": "Test project",
            "ProjectLaunchName": "Test project",
            "Status": "Active",
            "LaunchDate": "2017-08-31T00:00:00",
            "ProjectClassification": 0,
            "PageUrl": "ProductInnovation.aspx"
        },
        {
            "ProjectID": 101289,
            "ActivityTypeID": 1,
            "ProjectName": "Test project",
            "ProjectLaunchName": "Test project",
            "Status": "Active",
            "LaunchDate": "2017-02-28T00:00:00",
            "ProjectClassification": 0,
            "PageUrl": "ProductInnovation.aspx"
        },
        {
            "ProjectID": 101288,
            "ActivityTypeID": 1,
            "ProjectName": "Test project",
            "ProjectLaunchName": "Test project",
            "Status": "Terminated",
            "LaunchDate": "2018-04-30T00:00:00",
            "ProjectClassification": 3,
            "PageUrl": "ProductInnovation.aspx"
        },
        {
            "ProjectID": 101287,
            "ActivityTypeID": 1,
            "ProjectName": "Test project",
            "ProjectLaunchName": "Test project",
            "Status": "Active",
            "LaunchDate": "2016-01-31T00:00:00",
            "ProjectClassification": 0,
            "PageUrl": "ProductInnovation.aspx"
        }
    ]
}

我还发现，如果我在包含上述JSON的服务器上创建一个文本文件，DataTables会成功初始化：

$('#example').dataTable({
    "ajaxSource": "data/objects.txt",
    "columns": [
      { "data": "ProjectID" },
      { "data": "ProjectName" },
      { "data": "ProjectLaunchName" }
    ]
});

此外，下面是请求的console.log(json)屏幕截图。显然它不对。请注意，在json对象操作之前添加了这行代码。

如果我注释掉操作JSON的for()循环，console.log(json)看起来是正确的，这很奇怪，因为操作发生在console.log之后：

Answer 1

SOLUTION

Use initialization code below instead:

$('#example').dataTable({
    "dom": "frtS",
    "scrollY": "300px",
    "deferRender": true,
    "ajax": {
        "dataType": "json",
        "contentType": "application/json; charset=utf-8",
        "type": "POST",
        "url": "Default.aspx/GetSearchResults",
        "data": function (d) {
           return JSON.stringify(d);
        },
        "dataSrc": function(json){
           json = $.parseJSON(json.d);

           return json.data;
        },
        "columns": [
            { "data": "ProjectID" },
            { "data": "ProjectName" },
            { "data": "ProjectLaunchName" }
        ]
    }
});

DataTable默默无法初始化

1 个答案: