Reputation: 421

DataTables Javascript data source 'No Data Available'

Live error example: http://live.datatables.net/virobeci/1/edit?html,css,js,output

I have a JavaScript object similar to this:

{ 
    "rows": [
        {
            "doc": {
                "CustomerName": "abc",
                "key": "value",
                "keyabc": "value"
            }
        },
        {
            "doc": {
                "CustomerName": "abc",
                "key": "value",
                "keyabc": "value"
            }
        }
    ]
}

I've been trying for a long time to get DataTables to initialize using JavaScript datasource as mentioned here:

https://datatables.net/examples/data_sources/js_array.html

This is what I'm doing:

    var table = $('#customersTable').DataTable( {  
        data: view,
        columns: [
            { "rows" : 'doc.CustomerName' },
            { "rows" : 'doc.CustomerName' },
            { "rows" : 'doc.CustomerName' },
            { "rows" : 'doc.CustomerName' },
            { "rows" : 'doc.CustomerName' },
            { "rows" : 'doc.CustomerName' }
        ]  
    });

I get no errors, just 'No data available in table'

Table is defined like this:

    <table id="customersTable" class="table table-striped table-bordered" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Number</th>
                <th>Login</th>
                <th>Party</th>
                <th>Sales-Id</th>
                <th>Sales-Party</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Number</th>
                <th>Login</th>
                <th>Party</th>
                <th>Sales-Id</th>
                <th>Sales-Party</th>
            </tr>
        </tfoot>

    </table>

Live example: http://live.datatables.net/virobeci/1/edit?html,css,js,output

Edit -> PLEASE NOTE:

I can't change the format of the data source other than running a for loop and making a new array to match the sample data source. I wanna know if its possible to initialize the table with this type of data source

Upvotes: 0

Answers (3)

Mario Lopez

Reputation: 1465

You haven't form your data properly:

var view = { 
"rows": [
    {
            "CustomerName": "abc",
            "key": "value",
            "keyabc": "value"
    },
    {
            "CustomerName": "abc",
            "key": "value",
            "keyabc": "value"
    },
  {
            "CustomerName": "abc",
            "key": "value",
            "keyabc": "value"
    }
]
};

And you have to assign the right array as data.row (although in your case you could simplify your structure a bit removing one level).

Note that you will have to add the data to the 'data' property of 'columns':

var table = $('#customersTable').DataTable( { 
        processing: true,
        data: view.rows, 
        columns : [
            { data : 'CustomerName' },
            { data : 'CustomerName' },
            { data : 'CustomerName' },
            { data : 'CustomerName' },
            { data : 'CustomerName' },
            { data : 'CustomerName' }
        ]  
 });

Upvotes: 1