Unable to populate table with AJAX JSON dataset?

TimeBomb006

Debug bookmarklet results

I'm attempting to load a table with a JSON dataset via an AJAX call to a web service. The web service returns the correct JSON (with the data object as the root), but I'm receiving the following error:

DataTables warning: tableid=example - Requested unknown parameter '1' for row 0. For more information about this error, please see http://datatables.net/tn/4

And so on.. as I scroll down the table.

Additionally, DataTables is populating the table with 1159 rows of individual characters, instead of the 5 rows found in my JSON result set. This result set is directly copied from the json.d object in the dataSrc property in my initialization.

I've viewed the error reference page, and have tried many different initialization options, but I cannot get the datatable initialized correctly. If I take the JSON response, put it in a text file, and use a data file as the source, it works just fine, but something about the web service and dataSrc property are screwing things up.

I use a simple table:

<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>
</table>

And seemingly straightforward initialization:

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

TimeBomb006

I incorrectly included the columns property array inside the ajax object, where it should have been inline with dom, scrollY, etc. Corrected code below fixed the issue:

$('#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).data;
        }
    },
    "columns": [
            { "data": "ProjectID" },
            { "data": "ProjectName" },
            { "data": "ProjectLaunchName" }
    ]
});

allan

Good to hear you got it sorted out!

Allan