DataTables Javascript data source 'No Data Available'

Question

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

Mario Lopez · Accepted Answer · 2015-11-24 23:28:20Z

1

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' }
        ]  
 });

answered Nov 24, 2015 at 23:28

Mario Lopez

1,46513 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Web Development Over a year ago

Thank you so much. Been at it for 3-4 hours.

Palanisamy KK · Accepted Answer · 2015-11-24 23:09:20Z

0

you have to mention column name in your "columns" config and your data can be flattened.

http://live.datatables.net/poganaso/2/edit

answered Nov 24, 2015 at 23:09

Palanisamy KK

1

1 Comment

Web Development Over a year ago

no i can't change the data its a predefined object from a nosql database

Yasemin çidem · Accepted Answer · 2015-11-24 23:17:42Z

0

you can try this,sample code is here:http://live.datatables.net/virobeci/2/edit?html,css,js,output

answered Nov 24, 2015 at 23:17

Yasemin çidem

6238 silver badges17 bronze badges

2 Comments

Yasemin çidem Over a year ago

I check try the link .Link is correct.You can look again

Web Development Over a year ago

link is correct but you changed the data format. I needed to use the format I have

Collectives™ on Stack Overflow

DataTables Javascript data source 'No Data Available'

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related