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: <br/><input type="text" name="fname" id="fname" /> <br/>
Last Name: <br/><input type="text" name="lname" id="lname" /> <br/>
Email: <br/><input type="text" name="email" id="email"/> <br/>

This is my html table with my JQuery intialization of DataTables:

<div id="tables">
    <table id="table" border="1">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
    </table>
</div>

$('#reg_more').dataTable({
    "bLengthChange": false,
    "bInfo": false
});

Now I want to put an add button so that the user can input the first and last name, and email and hit add, and it will be put into the table. How do I go about doing this?

Answer 1

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

Answer 2

$(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 3

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