JQuery的数据表添加新行(JQuery Datatables Add new Row)

我创建一个注册页面，如果他们想有人可以注册到其他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/>

这是数据表的我的JQuery intialization我的HTML表：

<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
});

现在，我想提出的添加按钮，以便用户可以输入名字和姓氏，以及电子邮件和命中增加，它会被放入表。 我该如何去这样做呢？

Answer 1:

$(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" />

Answer 2:

下面是这个现在在数据表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();
});

Answer 3:

这也可能是有用的，但并不总是在倍。 我有这个调试自己，不会占用，即使你有更多的数据多少时间。

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

注：如果您使用的不是固定列，那么你可以删除此行$（yourfirstcolumn）.insertAfter（tableClone.children [“1”]。

文章来源: JQuery Datatables Add new Row