Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Populate Datatable from ajax json

My table is not populating. I can see that it is getting the correct JSON

JSON Data received looks like this:

[
  {
    "id": "1",
    "name": "FooBar",
    "predicted": "0",
    "points": "1",
    "section_id": "1",
    "detail_alias": ""
    ...
  },
  ...
]

HTML

<table id="example"></table>

JS

$('#example').dataTable( {
    "ajaxSource": "rest/index.php?m=foo",
    "columns": [
        { "data": "id" },
        { "data": "name" },
        { "data": "detail_alias" },
        { "data": "points" }
    ]
} );

All I'm seeing in my browser is:

enter image description here

It says "Loading..." when the network tab shows that the call had a 200 response with the correct data.

Why isn't the table populating?

like image 271
Dallas Avatar asked Sep 26 '16 00:09

Dallas


People also ask

How do you populate a Datatable?

Begin on the indicator's definition page. For data source, select populate from a data table and choose the table that contains information for this indicator. Next, select the calculation. You can either count all rows, count unique sets of columns, or get a sum or average of a column of numeric data.

What is Datatable in Ajax?

DataTables has the ability to read data from virtually any JSON data source that can be obtained by Ajax. This can be done, in its most simple form, by setting the ajax option to the address of the JSON data source.


2 Answers

So the ajaxSource in my question was expecting data to be formatted as such:

{ data: [ { ...

And I didn't want to have to modify my back end to send data in this format as it would cause problems in other places. I'm assuming other people that end up on this page looking for a solution will likely have the same issue.

My solution was to get the data via jQuery.ajax() and then pass it in to the aaData field, like this:

$.ajax({
    'url': "/rest/index.php?m=foo",
    'method': "GET",
    'contentType': 'application/json'
}).done( function(data) {
    $('#example').dataTable( {
        "aaData": data,
        "columns": [
            { "data": "id" },
            { "data": "name" },
            { "data": "detail_alias" },
            { "data": "points" }
        ]
    })
})

This allows me to not have to worry about changing the json data from the format in the question.

I like this way better anyway as I feel it gives me more flexibility if I wanted to do modify or use the data for anything else at the same time.

like image 118
Dallas Avatar answered Oct 07 '22 21:10

Dallas


I think you must return your json with the array of "aaData"

return dataTabledata['aaData'] = 'your json data'

By default DataTables will use the "aaData" property of the returned data which is an array of arrays with one entry for each column in the table.

In your jQuery create ajax that will handle the data from your server side

 function getdtData(){
    /*clear table row first*/
    $('#sample').dataTable().fnDestroy();
    /*populate your datatable using ajax*/
    $('#sample').dataTable({
    "sDom": 'frtip',
    "bServerSide": true,
     /*server side source*/
    "sAjaxSource": "rest/index.php?m=foo",
     /* we use sDom to specify the lenght of the pagination if you will using pagination in your data table*/
    "lengthMenu": [[ 5, 5], [ 5, 5]],
    "aoColumnDefs": [
        { "aTargets": [ 0 ], "bSortable": false},
        { "aTargets": [ 1 ], "bSortable": false },
        { "aTargets": [ 2 ], "bSortable": false },
        { "aTargets": [ 3 ], "bSortable": false }
    ]
});

refer to this documentation http://legacy.datatables.net/usage/server-side

like image 28
Poldo Avatar answered Oct 07 '22 19:10

Poldo