jQuery Datatables 添加新行

Question

我正在创建一个注册页面，允许用户注册多达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 DataTables初始化的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
});

现在我想加入一个添加按钮，以便用户可以输入名字、姓氏和电子邮件并点击添加，然后将其放入表格中。我该如何做呢？

- Richard

---

@StephenSarcsamKamenar 是的，这正是我在发布之前所做的，但我无法理解回复的意思。我甚至尝试了几个解决方案，但都没有成功。这就是为什么我来到这里，希望有人能够解释一个我可以理解的解决方案。谷歌始终是我的首选。 - Richard

http://datatables.net/examples/api/add_row.html对你没有帮助吗？你在哪一部分遇到了困难？ - Farzher

@StephenSarcsamKamenar 那实际上是我尝试过的其中一个代码。但在实现和测试之后，我不知道如何使用它。我需要创建一个按钮，其onclick事件调用该函数吗？ - Richard

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

- User 99x

---

啊，好多了。我对jQuery和Datatables都是新手，所以做这种东西对我来说非常困难。但是现在感觉好多了。所以我也可以用同样的方法进行编辑和删除。还有一个问题，如何正确地发布所有这些数据，以便将其添加到MySQL数据库中？比如他们注册自己和其他20个人，我需要向我的MySQL数据库添加21个条目。 - Richard

您可以使用jQuery ajax将数据插入数据库来注册。 - User 99x

Answer 2

以下是在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();
});

- jamesSampica

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"]。

- Eliotjse