jquery DataTable cant read JSON data

Question

My JSON includes both string and int values. HTML table columns match with DataTable columns. DataTables data is being loaded through ajax. Everything seems fine but I am getting error

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

HTML:

<div class="col-lg-12">
    <h3>All Black List Mails</h3>
    <hr />
    <br />
    <table id="blackListMailTable" class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>Email</th>
                <th>Module</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>  

DataTable code:

//making the table
var table;
if ($.fn.dataTable.isDataTable('#blackListMailTable')) {
    table.ajax.reload();
}
else {
    table = $("#blackListMailTable").DataTable({
        ajax: {
            url: ".....",
            method: "GET",
            dataSrc: ""
            //success: function (data) {
            //    console.log(data);
            //},
        },
        columns: [
            { data: "Id" },
            { data: "Email" },
            { data: "Module" },
            { data: "Status" }
        ]
    });
}  

I tested the JSON data by using success option of the ajax call. and in browsers console i got this JSON:

[  
   {  
      "Id":1,
      "Email":"***",
      "Module":"MailChimp",
      "Status":"Unsubscribed"
   },
   {  
      "Id":2,
      "Email":"***",
      "Module":"MailChimp",
      "Status":"Unsubscribed"
   },
   {  
      "Id":3,
      "Email":"***",
      "Module":"MailChimp",
      "Status":"Unsubscribed"
   },
   {  
      "Id":4,
      "Email":"***",
      "Module":"MailChimp",
      "Status":"Unsubscribed"
   },
   {  
      "Id":5,
      "Email":"***",
      "Module":"MailChimp",
      "Status":"Unsubscribed"
   },
   {  
      "Id":6,
      "Email":"***",
      "Module":"MailChimp",
      "Status":"Unsubscribed"
   },
   {  
      "Id":7,
      "Email":"***",
      "Module":"MailChimp",
      "Status":"Bounced"
   },
   {  
      "Id":10002,
      "Email":"***",
      "Module":"MailChimp",
      "Status":"Bounced"
   },
   {  
      "Id":10003,
      "Email":"***",
      "Module":"MailChimp",
      "Status":"Unsubscribed"
   }
]  

I tried using mData but no luck. What am I doing wrong?

Answer 1

Try with this may be some fields don't have data

columns: [
            { data: "Id",defaultContent: '' },
            { data: "Email",defaultContent: '' },
            { data: "Module",defaultContent: '' },
            { data: "Status",defaultContent: '' }
        ];

other wise remove

dataSrc:""

Answer 2

If your jsonResponse contains some null or blank value, then you can add defaultContent to your columns. which is similar to mysql default value.

 table = $("#blackListMailTable").DataTable({
        ajax: {
            url: ".....",
            method: "GET",
            dataSrc: ""
            //success: function (data) {
            //    console.log(data);
            //},
        },
        columns: [
            { data: "Id" , defaultContent: "" },
            { data: "Email", defaultContent: "" },
            { data: "Module", defaultContent: "" },
            { data: "Status", defaultContent: "" }
        ]
    });

one more issue i can see is : as you used

if ($.fn.dataTable.isDataTable('#blackListMailTable')) {
    table.ajax.reload();
}

this function checks

if #blackListMailTable is a DataTable. "If yes, initialise:"

so, it will throw re-initiaze error. to resolve that add ! not condition in your if.

if (!$.fn.dataTable.isDataTable('#blackListMailTable')) {
   table.ajax.reload();
}

it means :

if #blackListMailTable is a DataTable. "If no, initialise: