jquery datatable with asp.net mvc data not loading

Question

Hi on my project i'm using jquery datatable. my question is i tried to load the table using ajax request but i failed. after several attempt please help me to get through this.

my datatable initializing was

var responsiveHelperDatatableColReorder = undefined;
$('#tbl_datasource').dataTable({
    sDom: '<"top"i>rt<"bottom"flp><"clear">',
    iDisplayLength: -1,
    searching: false,
    ordering: false,
    scrollY: 300,
    scrollX: true,
    info: false,
    paging: false,
    "preDrawCallback": function () {
        // Initialize the responsive datatables helper once.
        if (!responsiveHelperDatatableColReorder) {
            responsiveHelperDatatableColReorder = new ResponsiveDatatablesHelper($('#tbl_datasource'), {
                tablet: 1024,
                phone: 480
            });
        }
    },
    "rowCallback": function (nRow) {
        responsiveHelperDatatableColReorder.createExpandIcon(nRow);
    },
    "drawCallback": function (oSettings) {
        responsiveHelperDatatableColReorder.respond();
    },
    ajax: {
        url : '../Home/DataSourceHealth',
        dataType: "json"
    },
    columns: [
        { "data": "providerName" },
        { "data": "fileName" },
        { "data": "status" },
        { "data": "lastRunTime" },
        { "data": "avgRecords" },
        { "data": "numberOfRecordes" },
        { "data": "numberOfErrorRecords" }
    ]
});

i use smartadmin admin template on my view

<table id="tbl_datasource" class="table table-striped table-hover table-condensed" width="100%">
    <thead>
        <tr>
            <th data-class="expand">Name</th>
            <th data-hide="phone,tablet">Source File</th>
            <th data-hide="phone">Loading status</th>
            <th data-hide="phone,tablet">Last run time</th>
            <th data-hide="phone,tablet">Avg. records</th>
            <th data-hide="phone,tablet">No.of records</th>
            <th data-hide="phone,tablet">Deviation</th>
            <th data-hide="phone,tablet">Data status</th>
            <th data-hide="phone,tablet">Action</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

on my controller i returned json object in this format

[
  {
    "loadDetailId": 108,
    "loadDetailStatusId": 7,
    "providerName": "Marin",
    "status": "Complete File Process",
    "fileName": "SiSenseChryslerPAPCanadaByClientAccount_03042015_bk8heq3q70.csv",
    "numberOfRecordes": 633,
    "avgRecords": 633.00,
    "numberOfErrorRecords": 3,
    "lastRunTime": "2015-03-10T15:01:40.14"
  },
  {
    "loadDetailId": 109,
    "loadDetailStatusId": 7,
    "providerName": "Marin",
    "status": "Complete File Process",
    "fileName": "SiSenseCPAPDisplayCampaigns_03042015_nqh8w254o2.csv",
    "numberOfRecordes": 100003,
    "avgRecords": 100001.00,
    "numberOfErrorRecords": 3,
    "lastRunTime": "2015-03-10T15:01:42.283"
  }
]

what was i missed when configuring jquery datatable?

updated

i have found the initial problem it was data structure should be like this

{
  "data": [
    {
      "loadDetailId": 108,
      "loadDetailStatusId": 7,
      "providerName": "Marin",
      "status": "Complete File Process",
      "fileName": "SiSenseChryslerPAPCanadaByClientAccount_03042015_bk8heq3q70.csv",
      "numberOfRecordes": 633,
      "avgRecords": 633.00,
      "numberOfErrorRecords": 3,
      "lastRunTime": "2015-03-10T15:01:40.14"
    },
    {
      "loadDetailId": 109,
      "loadDetailStatusId": 7,
      "providerName": "Marin",
      "status": "Complete File Process",
      "fileName": "SiSenseCPAPDisplayCampaigns_03042015_nqh8w254o2.csv",
      "numberOfRecordes": 100003,
      "avgRecords": 100001.00,
      "numberOfErrorRecords": 3,
      "lastRunTime": "2015-03-10T15:01:42.283"
    }
 ]
}

but still having issue here is the firebug screenshot

thanks

Answer 1

You have a couple of things that could be going wrong here. First, if your returned JSON is not named data then you have to change your datatables initialization to add datasrc = "" property to it like so:

ajax: {
    url : '../Home/DataSourceHealth',
    dataType: "json",
    dataSrc: ""
}

This makes datatables read in array of objects like the one that is returned in your case. Otherwise it looks for an object named data which when it doesn't find one, it assumes there is no data. Here is the documentation for this: https://datatables.net/reference/option/ajax.dataSrc

Second problem with your datatables is that you have more headers than the data that you're reading in through your columns:

9 headers:

<thead>
    <tr>
        <th data-class="expand">Name</th>
        <th data-hide="phone,tablet">Source File</th>
        <th data-hide="phone">Loading status</th>
        <th data-hide="phone,tablet">Last run time</th>
        <th data-hide="phone,tablet">Avg. records</th>
        <th data-hide="phone,tablet">No.of records</th>
        <th data-hide="phone,tablet">Deviation</th>
        <th data-hide="phone,tablet">Data status</th>
        <th data-hide="phone,tablet">Action</th>
    </tr>
</thead>

7 data columns defined:

columns: [
    { "data": "providerName" },
    { "data": "fileName" },
    { "data": "status" },
    { "data": "lastRunTime" },
    { "data": "avgRecords" },
    { "data": "numberOfRecordes" },
    { "data": "numberOfErrorRecords" }
]

The number of headers and data columns needs to be exactly the same or it will not work.