chobo2 chobo2 - 1 month ago 14
jQuery Question

How can I pass a html table row into DataTable.net fnAddData

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.

Answer

Call the fnAddData with an array of the values you want to add, like this:

oTable.fnAddData(["row 3, cell 1", "row 3, cell 2"]);

From version 1.10 use row.add() method described by @froilanq

You can read more details from the API here, here's the arguments it takes:

  1. array strings : The data to be added to the table. This array must be of the same length as the number of columns on the original HTML table.
    or
    array array strings : 2D array of data to be added to the table. The inner array must be of the same length as the number of columns on the original HTML table.
  2. boolean : optional - redraw the table or not after adding the new data (default true)