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

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

Таблица

Как настроить высоту каждой строки, чтобы она отображалась правильно. Это мой 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?

html jquery html-table datatables dynamic-tables
person Richard    schedule 16.09.2012    source источник

Ответы (2)


arrow_upward
6
arrow_downward

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

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

 tr { height: 50px }

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

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

person Nicola Peluchetti    schedule 16.09.2012
comment
Я попытался установить высоту броска строки css, как вы сказали, но это не сработало. Ставлю: tr { height: 50px; } Что я делаю не так? Если это работает в скрипке, может быть, это как-то связано с высотой страницы? - person Richard; 16.09.2012
comment
@Richard, вы установили его как последний оператор последнего импортируемого файла CSS? В противном случае он будет переопределен :) - person Nicola Peluchetti; 16.09.2012

arrow_upward
0
arrow_downward

Это старый вопрос, но если вы, как и я, не хотите делать это в 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' );
    }
} )
person joe92    schedule 14.03.2018