Add new row to Datatable from table values?

Question

I have a Datatable with information, and a fieldset with a table full of text inputs. The user should be able to add new rows according to the information values, but these rows are not correctly adding. Clearly the tr is being cloned and added (emptied where needed), the corresponding values are appending but the pagination is not being updated for Datatables. I cannot figure out how to correctly use .fnAddData() to get the job done here. On top of that, I don't know how to go about the "Permissions" column - getting checkboxes to convert to text for the table. Any ideas? Thanks in advance.

http://jsfiddle.net/BWCBX/28/

jQuery

$('#addRow').click(function () {
    var tbody = $('#example tbody');
    var tr = tbody.find('tr:first').clone();
    tr.find('td:first').text($(".engine").val());
    tr.find('td:eq(1)').empty();
    tr.find('td:eq(2)').empty();
    tr.find('td:eq(3)').text($(".version").val());
    tr.find('td:eq(4)').empty();
    tr.appendTo(tbody);
});

Answer 1

There are good examples on how to use fnAddData in the API docs .

I have rewritten your JS according to example provided in docs. I've extracted checkboxes checking into separate function to mantain high readability. The updated fiddle is here .