Assigning json data to datatable after initialization

Assigning json data to datatable after initialization

dipandipan Posts: 6Questions: 3Answers: 0

Hi
I am trying to assign json data to datatable after initialization. I have json data in this format
[{
"id": "58",
"country_code": "UK",
"title": "Legal Director",
"pubdate": "2012-03-08 00:00:00",
"url": "http://..."
},{
"id": "59",
"country_code": "UK",
"title": "Solutions Architect,",
"pubdate": "2012-02-23 00:00:00",
"url": "http://..."
},{
// ....more of the same......
}]

========
my code is

//initialization goes here
$(document).ready(function() {
if ($('#data-table').length !== 0) { $('#data-table').DataTable({ responsive: true }); }
} );

//after DB operation assign json data to table by calling this function

function fillTheDataTable(dataTableId,data)
{
dataTableId = "#"+dataTableId;
console.log(data);

        table = $(dataTableId).dataTable({
                "aaData": data,
                "aoColumns": [
      { "mDataProp": "id" },
    { "mDataProp": "country_code" },
    { "mDataProp": "title" },
    { "mDataProp": "pubdate" },
    { "mDataProp": "url" }
                             ],  
                "retrieve": true
                });
}

I am doing add/edit/delete operation through AJAX request and the .php file is giving me data in json format that i am trying to set to datatable by calling fillTheDataTable function.

However its not being assigned. Any comments/help/concern will be appreciated.

TIA.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,175Questions: 1Answers: 10,409 Site admin

    Have a look at the row.add() and rows.add() methods which can be used to dynamically add rows to the table.

    Allan

  • dipandipan Posts: 6Questions: 3Answers: 0
    edited May 2016

    Hi Allan
    Thanks for your answer. However I have read a lot and discover other way doing this. Here is my revised code...After assigning json data my datatable becomes empty rows. All rows are exact # of rows before any operation to datatable but columns are not displaying data.

    <script>
        var oTable;
    //json data
    [{
    "id": "58",
    "country_code": "UK",
    "title": "Legal Director",
    "pubdate": "2012-03-08 00:00:00",
    "url": "http://..."
    },{
    "id": "59",
    "country_code": "UK",
    "title": "Solutions Architect,",
    "pubdate": "2012-02-23 00:00:00",
    "url": "http://..."
    },{
    // ....more of the same......
    }]
    
    //initialization goes here
    $(document).ready(function() {
     
    if ($('#data-table').length !== 0) {
                    oTable =  $('#data-table').DataTable({ responsive: true }); 
                 }
    
    } );
    
    //after DB operation assign json data to table by calling this function
    
    function fillTheDataTable(dataTableId,data)
    {
    dataTableId = "#"+dataTableId;
    console.log(data);
    function fillTheDataTable(data)
    {
     
    console.log(data);
     oTable.clear().draw();
     oTable.rows.add(data).draw();
    }
    </script>
    

    There is error also i am getting you might want to see.

    DataTables warning:table id=data-table - Requested unknown parameter '0' for row 0. For more information about this error, please see http://datatables.net/tn/4

    Please advise.

    Thanks!

  • allanallan Posts: 63,175Questions: 1Answers: 10,409 Site admin
    Answer ✓

    Have you configured DataTables to expect objects using the columns.data option? I'm guessing not from that error.

    I'd really need a link to the page showing the issue to understand further though.

    Allan

  • dipandipan Posts: 6Questions: 3Answers: 0

    There you go. That was the issue. I have done that and it worked. Thanks Allan.

This discussion has been closed.