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?

@StephenSarcsamKamenar yah that's exactly what I did before posting, and I couldn't make heads or tails of the responses. I even tried a few solutions to no success. Which is why I came here so someone could explain a solution that I can understand. Google is always my first option — Richard
– Richard, Commented Sep 16, 2012 at 3:52
datatables.net/examples/api/add_row.html doesn't help? What part of that are you having trouble with? — Farzher
– Farzher, Commented Sep 16, 2012 at 3:53
@StephenSarcsamKamenar that is actually one of the codes I tried out. But after implementing and testing. I don't see how to use it. Do I have to create a button whose onclick event calls that function? — Richard
– Richard, Commented Sep 16, 2012 at 3:56

User 99x · Accepted Answer · 2012-09-16 03:56:30Z

23

$(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" />

answered Sep 16, 2012 at 3:56

User 99x

1,0211 gold badge14 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Richard Over a year ago

ahh much better, i'm brand new to jquery and datatables so it's very hard for me to do this kind of stuff. But this makes much better sense. So I can do this same thing for edit and remove. 1 more thing, how do I post all this data properly so i can add it to a mysql database? Let's say they register themselves and 20 other people, i need to add 21 entries to my mysql database.

User 99x Over a year ago

to register, you can use the jQuery ajax to insert the data into the database.

jimSampica · Accepted Answer · 2014-05-05 15:43:28Z

6

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

answered May 5, 2014 at 15:43

jimSampica

12.5k3 gold badges69 silver badges87 bronze badges

Comments

Eliotjse · Accepted Answer · 2017-05-24 10:05:04Z

0

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

answered May 24, 2017 at 10:05

Eliotjse

1191 silver badge15 bronze badges

Collectives™ on Stack Overflow

JQuery Datatables Add new Row

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related