这是我为我的要求创建的示例html。基本上,我想向现有数据表中添加新行,其中数据表的源是html dom表。在添加新行时,我需要先将其追加到dom表中,并且应该使用该额外的行重新初始化/重新创建数据表。
<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>
一旦实例化表,您将无法使用直接html标记操作添加行,请使用方法from the documentation:
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();
我知道这则超级老文章,但是如果有人仍在寻找答案,您可以使用以下命令轻松地做到这一点:
rows.add
传递html,包裹在jquery中并重绘表格var dt = $('#example').dataTable();
var row = '<tr><td>bond</td><td>abc</td><td>xyz</td><td>22</td><td>2012/03/29</td><td>$433,060</td></tr>';
dt.rows.add($(row)).draw();
var dt = $('#example').dataTable();
var row = '<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 tbody').append(row);
dt = $('#example').dataTable();