JQuery Datatables row height

Question

I have a page where people can enter in first/last name, phone, email, and ethnicity click add and it adds an entry into the datatables. The problem is after clicking add the table shows up like this:

How do I adjust the height of each row so that it shows up properly. 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 really:

1. How do I adjust the height properly so the user can see the data?
2. If the enter in the information of 20 people, how do I take all that data so I can enter it into a mysql database?

Solution 1

As you can see in this fiddle your code is correct and should work as expected.

In any case to set a row height, simply use css

 tr { height: 50px } 

i think there is no need for it to be more complex.

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

Solution 2

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

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

Comments

[Richard]

I tried setting the height of the row throw css like you said but that didn't work. I put: tr { height: 50px; } What am I doing wrong? If it works in fiddle is it something to do with page height maybe?

[Nicola Peluchetti]

@Richard did you set it as the last statement of the last CSS file you import?Otherwise it's being overridden :)