Jquery 如何将新行作为html添加到现有数据表中_Jquery_Jquery Datatables

Jquery 如何将新行作为html添加到现有数据表中

jquery

Jquery 如何将新行作为html添加到现有数据表中,jquery,jquery-datatables,Jquery,Jquery Datatables,下面是我为我的需求创建的示例html。基本上，我想向现有的datatable添加一个新行，其中datatable的源是HTMLDOM表。在添加新行时，我需要首先将其附加到dom表中，并且应使用该附加行重新初始化/新建datatable <head> <link type="text/css" rel="stylesheet" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css" /> <

下面是我为我的需求创建的示例html。基本上，我想向现有的datatable添加一个新行，其中datatable的源是HTMLDOM表。在添加新行时，我需要首先将其附加到dom表中，并且应使用该附加行重新初始化/新建datatable

<head>

<link type="text/css" rel="stylesheet" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

</head>

<body>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
        </tbody>
    </table>


</body>


<script>

$(document).ready(function() {

    var dt = $('#example').dataTable();


    $('#example tbody').append('<tr><td>bond</td><td>abc</td><td>xyz</td><td>22</td><td>2012/03/29</td><td>$433,060</td></tr>');

    dt.destroy();

    $('#example').dataTable();

}); 
</script>


名称
位置
办公室
年龄
开始日期
薪水
名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$320,800
加勒特温特斯
会计
东京
63
2011/07/25
$170,750
阿什顿考克斯
初级技术作者
旧金山
66
2009/01/12
$86,000
塞德里克·凯利
高级Javascript开发人员
爱丁堡
22
2012/03/29
$433,060
$（文档）.ready（函数（）{
var dt=$（'#示例'）.dataTable（）；
$（“#示例tbody”）.append（'bondabcxyz2222012/03/29$433060'）；
dt.destroy（）；
$（“#示例”）.dataTable（）；
});

表实例化后，无法使用直接html标记操作添加行，请使用以下方法：

我知道这篇非常古老的帖子，但如果有人仍在寻找答案，您可以通过以下方式轻松找到答案：

最简单的方法是使用

行。添加传递html，包装在jquery中并重新绘制表


var dt=$（'#示例'）.dataTable（）；
风险值行='Bondabcxyz2222012/03/29$433060'；
添加（$（行））.draw（）；

或者您所做的，销毁表，附加html并再次初始化datatable（您只需先销毁datatable，然后再附加）
var dt=$（'#示例'）.dataTable（）；
风险值行='Bondabcxyz2222012/03/29$433060'；
dt.destroy（）；
$（'#示例tbody'）。追加（行）；
dt=$（“#示例”）.dataTable（）；
还有另一个帖子谈到这一点。我最初尝试过，但我的要求不同。我想在td中添加hmtl元素（即某些东西），而不是静态数据。最后，这对我很有帮助！
var t = $('#example').DataTable();
var counter = 1;

$('#addRow').on( 'click', function () {
    t.row.add( [
        counter +'.1',
        counter +'.2',
        counter +'.3',
        counter +'.4',
        counter +'.5'
    ] ).draw();

    counter++;
} );

// Automatically add a first row of data
$('#addRow').click();