Доступ к WebAPI 2 json с вызовом ajax DataTables.NET в приложении MVC

Question

Я пытаюсь получить DataTables.NET, чтобы хорошо играть с сервисом RESTFul WebAPI, который я создал, и возвращаемый json не подходит для того, что ищет DataTables , Я попробовал различные примеры обработки сервера, а также несколько примеров, которые я нашел в Интернете, например, this one, но я не хочу, чтобы вызов WebAPI был динамическим. Я хочу, чтобы API был сам документирован, чтобы другие приложения и другие разработчики могли легко использовать API. Пока, вот что у меня есть.

массив JSON после выполнения JSON.stringify возвращается из моего API заключается в следующем:

[{"FirstName":"Gregg","LastName":"Coleman"},{"FirstName":"Ryan","LastName":"May"},{"FirstName":"Sean","LastName":"OConnor"},{"FirstName":"Rebecca","LastName":"Coleman"}] 

Код datatable.net выглядит следующим образом:

$("#data-table").DataTable({ 

      serverSide: true, 
      processing: true, 
      ajax: { 

       url: "http://localhost:55180/api/Person", 
       type: 'GET', 
       dataType: 'json', 
       dataSrc: function(json) 
       { 
        var j = JSON.stringify(json) 
        alert(j); 
        return j; 
       } 
      } 

     }); 

И HTML выглядит следующим образом

<table id="data-table" class="display"> 
<thead> 
    <tr> 
     <th>First Name</th> 
     <th>Last Name</th> 
    </tr> 
</thead> 

Ошибки я получаю обратно из DataTables является:

«DataTables предупреждения: идентификатор таблицы = данные таблицы - Запрос неизвестного параметра„1“для строки 0, столбец 1. Для получения дополнительной информации об этой ошибке, пожалуйста, см http://datatables.net/tn/4 ,

Любая помощь будет принята с благодарностью

Answer 1

Вы должны указать, какие атрибуты в формате JSON, которые соответствуют столбцы. Также вам нужно установить dataSrc в '' (потому что dataTables ожидает, что массив, содержащий элементы JSON, называется data) или просто вернуть JSON в обратном вызове dataSrc. Просто установив dataSrc в '' кажется самым простым:

$("#data-table").DataTable({ 
     serverSide: true, 
     processing: true, 
     columns : [ 
      { data : 'FirstName' }, 
      { data : 'LastName' } 
     ],  
     ajax: { 
      url: "http://localhost:55180/api/Person", 
      dataSrc : '' 
     } 
}); 

теперь DataTable инициализируется правильно ->http://jsfiddle.net/2jgt3mn8/