Jquery Datatables Add New Row

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: ).dataTable(); $('#addbtn').click(addrow); } ); functionaddrow() { $('#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

<inputtype="button" value="add"id="addbtn" />

Solution 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();
});

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