JQuery Datatables Add new Row

Question

I\'m creating a registration page where someone can register up to 20 other people if they wanted to. So I have these text boxes:

First Name: 


        

Answer 1

$(document).ready(function() {
    $('#example').dataTable();
    $('#addbtn').click(addrow);
} );

function addrow() {
    $('#example').dataTable().fnAddData( [
        $('#fname').val(),
        $('#lname').val(),
        $('#email').val() ] );

}

you need to call the addrow() in the button click.

Add this button in your html code

<input type="button" value="add" id="addbtn" />

Answer 2

Here is the way this is now done in DataTables 1.10

<input type="button" value="add" id="addbtn" />

var dTable = $('#example').DataTable();
$('#addbtn').on( 'click', function () {
    dTable.row.add([
        $('#fname').val(),
        $('#lname').val(),
        $('#email').val() 
    ]).draw();
});

Answer 3

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"].