Высота строки jQuery Datatables

у меня есть страница, на которой люди могут вводить имя / фамилию, телефон, электронную почту и этническую принадлежность нажмите Добавить, и он добавляет запись в datatables. Проблема в том, что после нажатия кнопки Добавить таблица отображается следующим образом:

Table

Как настроить высоту каждой строки, чтобы она отображалась правильно. Это мой HTML код для таблицы:

<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>

вот мой код jquery

$("#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()] );
    }

у меня есть два вопроса на самом деле:

  1. как правильно ли я регулирую высоту, чтобы пользователь мог видеть данные?
  2. если ввести информацию о 20 людях, как я могу взять все эти данные, чтобы я мог ввести их в базу данных mysql?
7
datatables dynamic-tables html html-table jquery

2 ответов

Как вы можете видеть в этой скрипка ваш код верен и должен работать так, как ожидалось.

в любом случае, чтобы установить высоту строки, просто используйте css

 tr { height: 50px }

Я думаю, что нет необходимости в том, чтобы он был более сложным.

что касается вопроса о том, как вставить данные в БД, есть куча примеров по google.

4

Это старый вопрос, но если, как и я, вы не хотите делать это в CSS, вы можете использовать drawCallback в 1.10 или выше, чтобы изменить таблицу ячейки и/или высоту с помощью JS.

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