Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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.

like image 800
chobo2 Avatar asked May 16 '10 19:05

chobo2


People also ask

How do I add a row to a data table?

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.

How do I get row data in HTML?

<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.

Does DataTable support Rowspan?

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.


1 Answers

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();
like image 107
froilanq Avatar answered Sep 27 '22 22:09

froilanq