Add Row Function

justivandev

Hello!

Can somebody tell me why this code is working with static javascript object but doesn't work if the data source is from an ajax? Basically I'm trying to follow a tutorial for adding rows. Please ignore the console.log(). I'm just trying to check if there is a difference in the data of the two procedure. Thank you!

buttons: [{
  extend: "selected",
  text: 'Duplicate',
  action: function (e, dt, node, config) {
    var rowData = table.rows({ selected: true }).data().toArray();
    console.log(rowData[0])
     var rowNode = table
    .row.add(rowData[0])
    .draw(false)
    .node();
    
    $(rowNode)
    .css('color', 'red')
    .animate({ color: 'black' });
    }
}]

kthorngren

The row.add() and rows.add() APIs work the same no matter what the data source is. As long as the data structure defined for the Datatable is the same as the data you are adding it should work. Looks like you are getting the selected rows from a table then re-adding the first row to the same table so the data structure is the same.

Look for errors in the browser's console. If you still need help please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

justivandev

Hi kthorngren,

Sorry I forgot to mention that there's no error in the console. It just does not work.

I'm not sure how I can provide a test case for the code base in ajax as the database sits locally on my pc but here's the working code based on the JavaScript object.

http://live.datatables.net/fumuwuna/1/

The only difference is that the ajax uses this option ajax: "/api/data" and that link returns the data format mentioned here. https://datatables.net/examples/ajax/objects.html.

Everything else is the same but as soon as I use ajax, it does not work anymore. Initially, I thought it's because of the draw() so I added false. But still it did not work.

kthorngren

You can get Ajax templates JS BIn here for your test case. I updated your test case to use Ajax data and it works as expected.
http://live.datatables.net/fumuwuna/2/edit

Are you using server side processing? Is yes then client side processes like row.add() doesn't work. You will need to add the row to the server DB then use draw() or ajax.reload() to fetch the updated data.

Can you update the test case to show the issue or provide a link to a test case with the issue. Without seeing the problem its hard to make suggestions.

Kevin

justivandev

Hi kthorngren,

Thank you. You're right. It's working. I'm not sure why it's not working on my current project but I just copied the same code to a new file and remove the other codes and it's working fine now. Now I just need to check which code is preventing the 'duplicate' to happen on my current project. Thanks again.