Trying to dynamically add a row via javascript

dilipbandi

I'm using version 1.10.2. According to the documentation, fnAddData is deprecated prior to 1.10.

What I'm doing is I'm moving a row from one table to another via a click event. The click event does an ajax call to the server to check for duplicates. Upon the ajax return, is the JavaScript to add the row in the other table. I have a global JavaScript variable which keeps the initialization of the DataTable.

According to the documentation I should be able to do ClientCurrentAlertList.row.add([a, b, c]);

However I get the following: 0x800a138f - JavaScript runtime error: Unable to get property 'add' of undefined or null reference

What am I doing wrong? I can look at ClientCurrentAlertList and access the fnAddData function.

I include Jquery-1.10.2.js, jquery.dataTables.js. Why is the "add" property undefined? This is not the first time this question has been asked. Unfortunately, the question was closed with no other explaination.

nava1021

I have been usig the following logic to add new rows dynamically. The new row in the example below is a new table itself.

May be this could help you.

//click event on button control inside #table
$('#table').on('click', 'button', function () {
row.child( GetHtml( obj ) ).show();
}

//template for new row
function GetHtml( obj ) {
   return '<table id="'+ id +'"><tr><td>'+ obj.some_value +'</td></tr>' +    '</table>';
}

allan

Based on the error you are getting I'm fairly confident that you are using the $().dataTable() constructor rather than the $().DataTable() one (note the capital D).

The difference is that $().dataTable() returns a jQuery instance, augmented with the DataTables legacy API methods. Augmenting jQuery like that wasn't really scalable, so 1.10 introduced $().DataTable() which returns an API instance and all of the new API methods are available there.

See also this FAQ.

Regards,
Allan

dilipbandi

That was it. Thank you. It is now fixed.

eliotjse

This can also be helpful but not always at times. I have debugged this myself and will not take much time even if you have more data.

var table = $(".tableclassName")["1"]
var tableClone = $(".tableclassName")["3"]
$(yournewrowtext).insertAfter(table.children["1"].children[currentRowId]);
$(yourfirstcolumn).insertAfter(tableClone.children["1"].
children[currentRowId]);

Note: If you are not using fixed column then you can remove this line $(yourfirstcolumn).insertAfter(tableClone.children["1"].
https://stackoverflow.com/questions/12444296/jquery-datatables-add-new-row/44155228#44155228