JQuery Datatables добавить новую строку

Я создаю страницу регистрации, где кто-то может зарегистрировать до 20 человек, если они хотели. Итак, у меня есть эти текстовые поля:

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

Это моя html-таблица с моей jQuery intialization 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
});

теперь я хочу поставить кнопку Добавить, чтобы пользователь мог ввести имя и фамилию, а также электронную почту и нажать add, и он будет помещен в таблицу. Как мне это сделать?

6
datatables html html-table jquery row

3 ответов

$(document).ready(function() {
    $('#example').dataTable();
    $('#addbtn').click(addrow);
} );

function addrow() {
    $('#example').dataTable().fnAddData( [
        $('#fname').val(),
        $('#lname').val(),
        $('#email').val() ] );

}

вам нужно вызвать addrow () в щелчке кнопки.

добавьте эту кнопку в свой html-код

<input type="button" value="add" id="addbtn" />
22

вот как это теперь делается в 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();
});
5

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

var table = $(".tableclassName")["1"]
var tableClone = $(".tableclassName")["3"]
$(yournewrowtext).insertAfter(table.children["1"].children[currentRowId]);
$(yourfirstcolumn).insertAfter(tableClone.children["1"]. 
children[currentRowId]);

Примечание: Если вы не используете фиксированный столбец, то вы можете удалить эту строку $(yourfirstcolumn).insertAfter (скатерть.дети["1"].

0