up vote 1 down vote favorite

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

enter image description here

thanks

share|improve this question
    
run your site on firefox with firebug enabled and check the console.. any js erros thrown? also add a break point on your action method that returns the json does it get called correctly, run fiddler and check the response of the call .. all looks good?. I am not familiar with jquery datatable function, but if you do check my comments they might give you a clue or help you enhance the question so others can help – A Khudairy Mar 11 '15 at 10:45
up vote 1 down vote accepted

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.

share|improve this answer
1  
that exactly i was missed dataSrc: "" thanks Nicolás Carlo – Gayan Ranasinghe Mar 11 '15 at 11:57
up vote -1 down vote

try to debug with chrome or IE and look what error you get for your request.

Also try this 

ajax: {
url : '/Home/DataSourceHealth',
dataType: "json"
},
share|improve this answer
    
that was not a issue.. i'm getting data to client side properly. problem comes when table rendering. thanks – Gayan Ranasinghe Mar 11 '15 at 11:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.