I am using the DataTable.net plugin and I am wondering how can I add dynamically a row to a existing table?
http://datatables.net/examples/api/add_row.html
I am looking at this example and they have it like this
/* Global variable for the DataTables object */
var oTable;
/* Global var for counter */
var giCount = 2;
$(document).ready(function() {
oTable = $('#example').dataTable();
} );
function fnClickAddRow() {
oTable.fnAddData( [
giCount+".1",
giCount+".2",
giCount+".3",
giCount+".4" ] );
giCount++;
}
but I am wondering what happens if I want I have a table row already rendered?
Say this is my table.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Now I have this
var newRow = '<tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>';
How can I add it through addRow?
I tried oTable.fnAddData(newRow);
but that seems not to work.
So I am not sure how to do this.
New rows can be added to a DataTable very easily using the row. add()DT API method. Simply call the API function with the data that is to be used for the new row (be it an array or object). Multiple rows can be added using the rows.
<tr>: The Table Row element. The <tr> HTML element defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.
DataTables fully supports colspan and rowspan in the table's header, assigning the required order listeners to the TH element suitable for that column. Each column must have one TH cell which is unique to it for the listeners to be added.
Solved simple:
var newRow = "<tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>";
var table = $('table').DataTable();
table.row.add($(newRow )).draw();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With