DataTable без инициализации

Question

Я изо всех сил пытаюсь развернуть мою библиотеку jQuery DataTables. У меня наконец-то появился вызов AJAX, работающий с веб-методом Web Forms (уродливый, который я знаю), и я получаю ответ 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": [ 
     { 
      "ProjectID": 100850, 
      "ActivityTypeID": 1, 
      "ProjectName": "Test Project", 
      "ProjectLaunchName": "Test Project", 
      "Status": "Deleted" 
     } 
    ] 
} 

Я не могу заставить таблицу заполнить, несмотря на все приведенные мной примеры. Я не получаю никаких сообщений об ошибках, в таблице всего 0 строк. Я пропустил что-то очевидное? Я попытался использовать стандартный ответ json.d вместо того, чтобы разбирать его, но это не удается.

Любые мысли?

EDIT:

Я использую ниже Web Forms .NET 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-объектом.

Если я закомментируйте for() цикл, который манипулирует JSON, то console.log(json) выглядит правильно, что странно, потому что манипулирование происходит после console.log:

Answer 1

РЕШЕНИЕ

Используйте вместо этого код инициализации:

$('#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" } 
     ] 
    } 
});