issues with Ajax calls to WebAPI 2. Possible JSON format issues?

gcoleman0828

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>

</table>

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

allan

Two issues:

1. The JSON being returned does not contain the information required by server-side processing. It must be an object that contains information about the number of rows at the server (since the payload will likely not contain the full data set if you are using server-side processing). Do you actually need server-side processing? Are you loading 50K+ records?
2. You need to tell DataTables what property to use for each column in the table from the data source object (since objects inherently have no order). See the manual.

Allan

gcoleman0828

No actually, I don't want it to be server processing. The records will never even come close to that. I have been just trying the various scenarios trying to see what is going on. So what would the correct JS syntax be to make a WebAPI call using Ajax and put it into the table? I even tried doing a $ajax{...} to get th edata and then put that into the 'data' property after doing a JSON.stringify on the returned results. I think I've just tried too many things and a little confused at this point when using the DataTables ajax property what I need/don't need.

allan

This should do it:

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

See also the Ajax section of the manual.

Allan