Skip to content
Advertisement

DataTables Requested unknown parameter ‘PageId’

I am running into the following error trying to load DataTables Objects data (https://datatables.net/manual/data/):

DataTables warning: table id=report-table - Requested unknown parameter 'PageId' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/

Below is example json data I am recieving from my C# SchemaReport/GetReportJson controller and being used in JQuery ajax success callback to initialize my DataTables:

[{"PageId":"foo","SchemaName":"foo","Name":"foo","LastModified":"foo","LastModifiedUser":"foo"}]

DataTables HTML:

<table id="report-table" class="display nowrap" style="width:100%">
    <thead>
        <tr>
            <th>Page ID</th>
            <th>Schema</th>
            <th>Name</th>
            <th>Last Modified</th>
            <th>Last Modified User</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Page ID</th>
            <th>Schema</th>
            <th>Name</th>
            <th>Last Modified</th>
            <th>Last Modified User</th>
        </tr>
    </tfoot>
</table>

JQuery ajax and DataTables init script:

<script>
    $(function () {
        $("button#report-form-submit").click(function () {
            event.preventDefault();
            var data = $("form#report-form").serialize();
            $.ajax({
                type: "POST",
                url: "@Url.Action("GetReportJson", "Report")",
                data: data,
                dataType: "json",
                beforeSend: function (data) {
                },
                success: function (data) {
                    // Report DataTables Init
                    // ===========================================
                    $('#report-table').DataTable({
                        data: data,
                        columns : [
                            {
                                data : 'PageId'
                            },
                            {
                                data : 'SchemaName'
                            },
                            {
                                data : 'Name'
                            },
                            {
                                data : 'LastModified'
                            },
                            {
                                data : 'LastModifiedUser'
                            }
                        ],
                        dom: 'Bfrtip',
                        buttons: [
                            {
                                extend: 'csv',
                                text: 'Download CSV',
                                filename: 'report-file'
                            },
                            {
                                extend: 'excel',
                                text: 'Download Excel',
                                filename: 'report-file',
                                title: ''
                            },
                        ]
                    });
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                },
                complete: function (data) {
                }
            });
        });
    });
</script>

I noticed that after acknowledging the error DataTables loads as following and stating 134 entries:

enter image description here

134 matches the character count of the json data (provided in answer). For some reason it appears DataTables is not seeing the json object and parsing individual characters? Just not sure why it would be doing this?

Advertisement

Answer

Your columns block should be:

                    columns : [
                        {
                            'data' : 'PageId'
                        },
                        {
                            'data' : 'SchemaName'
                        },
                        {
                            'data' : 'Name'
                        },
                        {
                            'data' : 'LastModified'
                        },
                        {
                            'data' : 'LastModifiedUser'
                        }
                    ],

You should also be sending your data from the Controller like this:

return Json(schemaData);

You do not need to serialize your data when you are returning a JSON since this will already return data in JSON format and if you use JsonConvert.SerializeObject then you are converting it twice which the DataTable plugin does not like.

User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement