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

Question

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

davidkonrad · Accepted Answer · 2015-11-30 12:58:30Z

8

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/

answered Nov 30, 2015 at 12:58

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related