JQuery Datatables row height

Question

I have a page where people can enter a first name, last name, phone number, email and ethnicity, adding an entry to the data. The problem is that after clicking add the table looks like this:

How to adjust the height of each line so that it displays correctly. This is my html code for the table:

<div id="table"> <form id="add_nrow" title="Add"> <br/> <label for="name">First Name</label><input type="text" name="fname" id="fname" class="required" rel="0" /> <br /> <label for="name">Last Name</label><input type="text" name="lname" id="lname" rel="1" /> <br /> <label for="name">Phone</label><input type="text" name="phone" id="phone" rel="3" /> <br /> <label for="name">Email</label><input type="text" name="email" id="email" rel="4" /> <br /> <label for="name">Ethnicity</label><input type="text" name="ethnicity" id="ethnicity" rel="5" /> <br /> <input type="button" value="Add" id="addbtn" /><br/><br/> </form> <table id="reg_more" border="1"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Phone</th> <th>Email</th> <th>Ethnicity</th> </tr> </thead> </table> </div> 

Here is my jquery code

 $("#addbtn").click(addrow); $('#reg_more').dataTable({ "bLengthChange": false, "bInfo": false, "bPaginate": false, "bStateSave": true, "rowHeight": 'auto', "bFilter": true, "bSort": false, "bAutoWidth": false }); function addrow() { $('#reg_more').dataTable().fnAddData( [ $('#fname').val(), $('#lname').val(), $('#phone').val(), $('#email').val(), $('#ethnicity').val()] ); } 

I have two questions:

• How to adjust the height so that the user can see the data?
• If I enter information from 20 people, how can I take all this data so that I can enter it into the mysql database?

Answer 1

As you can see in this fiddle, your code is correct and should work properly.

Anyway, to set the line height just use css

  tr { height: 50px } 

I think there is no need for this to be more complicated.

Regarding the question of how to insert data into db, there are a few google examples.

Answer 2

This is an old question, but if you, like me, you don’t want to do this in CSS, you can use drawCallback at 1.10 or higher to change the filling and / or cell height of the table using JS.

 var import_list = $( 'table.import_list' ).DataTable( { 'drawCallback': function () { $( 'table.import_list tbody tr td' ).css( 'padding', '5px 8px 5px 8px' ); } } )