Adding to an empty table

Adding to an empty table

vineela374vineela374 Posts: 17Questions: 8Answers: 0

I am adding elements to data table using Jquery.

$('#finalPlayListTable tr:last').after('<tr><td>' + reportTitle + '</td><td>' + analystName + '</td><td>' + dateTime + '</td><td>' + status + '</td></tr>');

I need to get the all the row data of the finalPlayListTable. If the data table is already initialized I am able to use
$('#finalPlayListTable').DataTable().rows().data().toArray();

if Final table has no elements and I am using the above code to push the elements I am unable to get the row data using
$('#finalPlayListTable').DataTable().rows().data().toArray();

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    The method you are using adds to the table but Datatables does not know about the added row. A better option is to use Datatables API to add the row, like row.add(). Otherwise you will need to use an API for Datatables to update its data cache. Something like rows().invalidate().

    Kevin

  • vineela374vineela374 Posts: 17Questions: 8Answers: 0

    I did not understand how using rows().invalidate() can help me.
    Can you elaborate your answer?

    Vineela.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    I built an example but was not able to get your method to add a row to work if Datatables is initialized. The example also shows how to use row.add() which is what I suggest you use.
    http://live.datatables.net/pukapomo/1/edit

    Kevin

  • vineela374vineela374 Posts: 17Questions: 8Answers: 0

    Thanks Kevin, this helped!

  • vineela374vineela374 Posts: 17Questions: 8Answers: 0
    edited November 2019

    This answered the question, but there is an another problem.
    I add data to dynamic data table and get the row information in a json like I passed working now but when I use

    $('#finalPlayListTable').DataTable().rows().data().toArray();
    
    response: [{
    
    "name": "vineela",
    "greeting": "hello",
    },
    {
    "name": "icecream",
    "greeting": "hi",
    }]
    

    to get the data back in a json form that I send it.

    But when I initialize the table like you did in your example and use

    $('#finalPlayListTable').DataTable().rows().data().toArray();
    

    I got

    response: [{
    "vineela",
    "hello",
    },
    {
    "icecream",
    "hi",
    }
    ]
    

    How do I get the same json for the second case too?

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Hi @vineela374 ,

    Could you update Kevin's test case to demonstrate the problem, please.

    Cheers,

    Colin

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    If your data is object based then you will use columns.data to define the columns. Since your row data is an array of objects you can use rows.add() to add all the rows at once. Here is an example:
    http://live.datatables.net/temunihu/1/edit

    Kevin

This discussion has been closed.