Accessing WebAPI 2 json with DataTables.NET ajax call in MVC application

问题

I have been trying to get DataTables.NET to play nicely with a WebAPI RESTFul service I built and the json being returned does not seem to fit what DataTables is looking for. I have tried the various "server processing" examples along with a few examples I found on the internet like this one, but I don't want to make the WebAPI call dynamic. I want the API to be self documenting so that other applications and other developers can easily also use the API. So far, here is what I have.

The JSON array after doing a Json.stringify being returned from my API is this:

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

The datatable.net code looks like this:

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

        });

And the HTML looks like this

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

The error I am getting back from dataTables is:

"DataTables warning: table id=data-table - Request unknown parameter '1' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4.

Any help would be greatly appreciated

回答1:

You need to specify which attributes in the JSON that correspond to which columns. Also you need to set dataSrc to '' (because dataTables expects that the array holding the JSON items is named data) or simply return the JSON in the dataSrc callback. Just setting the dataSrc to '' seems to be the easiest :

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

now the dataTable is initialized properly -> http://jsfiddle.net/2jgt3mn8/

来源：https://stackoverflow.com/questions/33949727/accessing-webapi-2-json-with-datatables-net-ajax-call-in-mvc-application