DataTables warning: table id=tblComplaintStatusSummary - Requested unknown parameter '0' for row 0,

chirag123

Getting this error even though my responce is completely correct.

Json Responce From Server Side.

   {"data":
     "[
          {\"OpenComplaint\":2,\"PendingComplaint\":1,\"BRANCHNAME\":\"HEAD OFFICE\"},
          {\"OpenComplaint\":1,\"PendingComplaint\":0,\"BRANCHNAME\":\"KAMREJ\"}
      ]"
    }

My Coding For Datatable in Javascript File.

   function LoadDatatable() {
    $.ajax({
    type: "POST",
       url: "/ComplaintManagement/GetData_ComplaintSummary",
    dataType: "json",
    contentType: "application/json;charset=utf-8",
    processData: true,
    success: function (data, status, xhr) {
        if (data.data != "null") {
            var table = $('#tblComplaintStatusSummary').DataTable();
            var rows = table.rows().remove().draw();
            var str = JSON.parse(data.data);
            table.rows.add(str).draw();
        }
        else {
            alert("Error");
        }
    },
   });
 }

function CreateDatatable() {
var t = $('#tblComplaintStatusSummary').DataTable({
    dom: 'Bfrtip',
    paging: false,
    buttons: [
           $.extend(true, {}, {
               extend: 'pdfHtml5',
               download: 'open',
               footer: true
           })
    ],
    "exportOptions": {
        columns: [1, 2, 3]
    },
    "columnDefs": [{
        "searchable": false,
        "orderable": false,
        "targets": 0
    }],
    "aaSorting": [],
    "aoColumns": [
                   {
                       "data": "srno",
                       "defaultContent": ""
                   },
                   { "mData": "BRANCHNAME" },
                   { "mData": "OpenComplaint" },
                   { "mData": "PendingComplaint" }
    ],
})

t.on('order.dt search.dt', function () {
    t.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
        cell.innerHTML = i + 1;
        t.cell(cell).invalidate('dom');
    })
}).draw();
}

 $(document).ready(function () {
      LoadDatatable();
 });

I've refered to all existing questions but none of them solved my issue.
I've also tried mDataProp instead of mData

kthorngren

According to https://jsonlint.com/ your JSON string is not valid. You have quotes around [] and you are escaping the quotes with a backslash. Remove those and it looks like this which is valid according to jsonlint.com:

{
    "data": [{
        "OpenComplaint": 2,
        "PendingComplaint": 1,
        "BRANCHNAME": "HEAD OFFICE"
    }, {
        "OpenComplaint": 1,
        "PendingComplaint": 0,
        "BRANCHNAME": "KAMREJ"
    }]
}

Kevin

allan

I think having it as a string, although unusual, is actually okay in this case, since the data loading for the DataTable uses:

var str = JSON.parse(data.data);
table.rows.add(str).draw();

The error suggests to me that there might be 5 columns defined in the HTML?

Allan

chirag123

 $(document).ready(function () {
     CreateDatatable();
     LoadDatatable();
  });

I was just loading datatable which was still remained to be created. Though thanks everyone.