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

Question

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.

Arundel

Answer 1

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)

Uzzi

So I can't just add a rendered html string into it? – Arundel

@Arundel - Not if you want it on the datatable, it's based on an object structure, you can .append() to the table, but that won't do what you're after I don't think. – Uzzi

Hmm. That sucks. Another problem I see. Is each of my table rows has a inline style. How would I stick that on it? – Arundel

@Arundel - Inline styling is usually lost when you sort, etc anyway, can you give an example of the inline styling your after? (Any reason this can't be a class? There are many class options available). – Uzzi

Hi. When I render the table for the first all the inline styling does not seem to get lost. the reason why I don't use a class is each row has a unquie background color and font color set by the user. I am sure with some programming I could some how make it into classes but it would take time I don't have. – Arundel

Another problem is. Each of my td's have there own class attached to it. How do I add those as well? – Arundel

Answer 2

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();

Vorous

I agree, this should be the correct answer. By using DataTable api directly - you can add an extra row, but you cannot add extra arguments like data-... to the rows tr or td elements. – Speedwriting

I get an error trying this on the latest version. "Cannot set property '_DT_CellIndex' of undefined." Happens when i try to sent it string of a <tr> as well. – Roomette

Why do you use table.row.add($(newRow )).draw(); instead of table.row.add(newRow).draw(); ? – Cothran

I also received the error "Cannot set property '_DT_CellIndex' of undefined.". Folllowing the answer by "Decoy" here datatables.net/forums/discussion/32575/… after passing the same number of columns the table contained I no longer received the error. – Radbourne

Answer 3

If you still have this problem, have a look to the DataTables plug-in fnAddTr.

I think it can solve your issues.

Helmand

Answer 4

jQuery DataTables 1.10 allows you to do this natively without the need for a plugin. Grab the most recent development branch here: https://github.com/DataTables/DataTables/tree/1_10_wip/media/js

Here is some sample code on how to use it:

$(document).ready(function() {
  var t1 = $('#t1').DataTable();
  var t2 = $('#t2').DataTable();

  $('#t1 tbody').on( 'click', 'tr', function () {
    t1.row( this ).remove().draw();
    t2.row.add( this ).draw();
  } );

  $('#t2 tbody').on( 'click', 'tr', function () {
    t2.row( this ).remove().draw();
    t1.row.add( this ).draw();
  } );
} );

Reference: http://www.datatables.net/forums/discussion/comment/52595#Comment_52595

More Info

Note the call above is to DataTable() and not dataTable(). If your object is dataTable() access it as follows:

t1 = $('#t1').dataTable();
t1.DataTable().row.add(this).draw();

Beat

Answer 5

var dataTable = $('.table').DataTable();

// get the html table rows then
dataTable.destroy();

$("tbody").empty().promise().done(function(){
    $("tbody").html(data);
    dataTable = $(".table").DataTable();
});

This works if you want to apply the whole html row if you have like inline css or extra html tags inside the table divisions.

Axseed

Answer 6

hi my friends: this code worked well for me.

var oTable = $('#datatable').dataTable();
var api = oTable.api(true);
var newRow = {
                colName1: '',
                colName2: 0,
                colName3: 0,
                colName4: 0
             };
api.row.add(newRow).draw();

good luck.

Korrie

Answer 7

let tr = html.createElement("tr");
tr.innerHTML = '<td>row 3, cell 1</td><td>row 3, cell 2</td>';
oTable = $('#example').dataTable();
oTable.row.add(tr).draw();

Macur

Answer 8

To add multiple rows from JSON file using MVC.

    function fnClickAddRow(obj) {
        $('#tableID').dataTable().fnAddData([
            obj.column1,
            obj.column2,
            obj.column3,
            obj.column4,
            obj.column5,
            obj.column6,
            obj.column7,
            obj.column8,
            obj.column9,
            obj.column10]);
    }
    function rowAdd() {
        $.ajax({
          type: 'POST',
            url: '@Url.Action("Action", "Controller")',
        success: function (data) {
            $.each(data, function (i, obj) {
                fnClickAddRow(obj);
            });
            }
        });

    }

Predesignate