Set data from json ( not file )

ccristoful

Hello,

I want to set a new data into a DataTable, but I don't have a file with the json data. I'm receiving the new data from a HttpResponse and this data don't contain the headers of the table.

It's like :

{
  "data": [
    {
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "extn": "8422"
    },
    {
      "name": "Ashton Cox",
      "position": "Junior Technical Author",
      "salary": "$86,000",
      "start_date": "2009/01/12",
      "office": "San Francisco",
      "extn": "1562"
    }
]}

First I clean the old data with :

$('#table_reports').dataTable().fnClearTable();

But I don't know how to fill the table with the json. Thanks for you help and for this plugin, and sorry for my poor english.

visionx

1. Create a table definition as follows.

       <table id="table_id"  class="test">
           <thead>
               <tr>
                   <th>Name</th>
                   <th>Position</th>
                   <th>Salary</th>
                   <th>Start Date</th>
                   <th>Office</th>
                   <th>Extn</th>
   
               </tr>
           </thead>
       </table>
   

2. Create a json array from backend.

   final JSONObject packet = new JSONObject();
   final JSONArray array = new JSONArray();
   
   //get actual data from database 
   final Person[] persondata = dao.getPersonData();
   for(Person person:persondata) {
       object.put("name", persondata.getName());
       object.put("salary", persondata.getSalary());
       .........
       ......
   }
   
   packet.put("aaData", array);
   packet.put("success", true);
   

3. Table definition should be as follows.

   $('#table_id').dataTable( {
   
       ................
       ..............
   
               "sAjaxSource" : '/test/test.ajax?ajax'
               "sServerMethod": "POST",
               "aoColumns" : [ 
                               {"mData" : "name"},
                               {"mData" : "position"}, 
                               {"mData" : "salary"},
                               {"mData" : "start_date"},
                               {"mData" : "office"},
                               {"mData" : "extn"}
   
       } );
   

   }

allan

I would suggest using the rows.add() method if you want to dynamically add new rows to an existing table.

Also consider using clear() rather than the old fnClearTable method.

Allan

ccristoful

Uhmm thanks a lot for this answers but I thought about to get the data like this:

table.ajax.url("apply_filter").load();

apply_filter is a view and returns the data table in format JSON( not the headers only the data).

It's posible to set the headers(recieved by Httpresponse in array format and will not change) in table declaration? And then change the content by table.ajax.url("view return a new data wihthout headers ").load() ?

visionx

Can't you iterate over json header array and create "aoColumnDefs" as following way?

var tableColumnNames = [];

for (var i=0; i < jsonCloumnNames.length; i++ ) {
      tableColumnNames.push({
                "sTitle": jsonCloumnNames[i],
                "aTargets": [i]
       });
};
 
$('#test_id').dataTable({
                      ............
                      .............
                      "aoColumnDefs": tableColumnNames,
                      
 });

ccristoful

Hi again and thanks for the answer. I did this but I still cannot add rows by the column name. I tried to add this:

table.row.add( [ {"col_name1":"Tiger Nixon", "col_name2":"System Architect", }] ).draw();

What I am doing wrong? Thanks.

allan

Can you link to a page showing the issue. Note also that you have used row.add() which expects a single row (unlike rows.add() which will read multiples rows in). Your use of an array makes me think this was in error.

Allan

ccristoful

http://gyazo.com/706940ab34365584e87cc77b93f94462

Well I used to add a simple row and the error it's the same. I am doing the following steps:

1- declare the html with default data.

2- then create a dataTable.

table = $('#table_reports').DataTable({

orderFixed: {"post": [0, 'desc']} ,

columnDefs: [ {orderable: false, targets: [0, 1]}],

order: [ [ 0, 'desc'] ],

autoWidth: true,

bFilter: false, bInfo: false,

searching: false,

"aoColumnDefs": tableColumnNames,



 });

tableColumnNames : followed the last post method. ( contain col_name1 and col_name2 )

3- Refresh with new data

table.row.add( [ {"col_name1":"Tiger Nixon", "col_name2":"System Architect", }] ).draw();

visionx

Why did you add both "columnDefs" and "aoColumnDefs" in table definition? Can you just remove "columnDefs" from the definition ?

ccristoful

Sorry I deleted columnDefs but the table didn't wire the name_colum with the definition of aoColumnDefs.

I cannot fill this information:

table.row.add( {"col_name1":"Tiger Nixon"} ).draw();

But don't work, instead this code is working:

table.row.add( {"0":"Tiger Nixon" } ).draw();

allan

If the latter is working then you haven't used columns.data to tell DataTables which object property to use for each column and it is using its default (integers).

Allan

ccristoful

I found the error, I only need to define the mData and then I think the table wire the int with a string. Thanks a lot!