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:
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.