datatables dynamically add row with fnAddData or similar and add a class to a specific column

Question

Ok I am trying to dynamically add new rows to a already rendered table using datatables. Thus far what I have is

oTable.fnAddData(["D:\Exlab", '[<a href="#" class="datasource_row_edit" data-idr="reference">Edit</a>] [<a href="#" class="datasource_row_delete" data-idr="reference">Delete</a>]']);

Which this works for adding a single row (if anyone knows how to use a similar function to add multiple rows without running a loop that would be bonus). However I want to have a specific column in this case the second column have a special class, is there a means of adding a class to a column thats being added on the fly?

score 3 · Accepted Answer · edited May 23 '17 at 12:12

I think you could accomplish this by controlling the column definitions and assigning the class via fnRender. After your columns are defined, feed the fnAddData function some data.

Here is a similar SO questions.. CLICK HERE that I think you would find useful.

In your case, I think that the column definitions would look something like this

...
    "aoColumns": [
            {   
                "sClass": "datasource_row_edit",
                "fnRender": function( oObj ) {
                    return '<a href="#" data-idr="reference">Edit</a>';
                } 
            },
            {  
              "sClass": "datasource_row_delete",
               "fnRender": function( oObj ) {
                    return '<a href="#" data-idr="reference">Delete</a>';
                } 
            }
        ],
...

Via their api .. http://www.datatables.net/api ... You could feed the table any number of rows via json

var json = eval("[" + response + "]");
oTable.fnAddData(json);

and let the datatable render any formatting itself dynamically

The table is initially rendered by php, then datatables is run over it, in this particular case the table has already been rendered and I am adding new rows upon user input. So the links overall are part of the second column I want to apply a class to, and not the links themselves. The column is to have the text aligned left, and the background color slightly different but only on that column, the class doesn't apply when I add it with fnAddData so I am trying to figure out how to get that class to apply to the TD overall] — chris, Jan 11 '13 at 21:59

score 0 · Answer 2 · answered Jan 11 '13 at 23:39

For your first question, you can hook up to the "fnCreatedRow" callback, http://www.datatables.net/usage/callbacks. This will allow you to listen to row add events and manipulate them as necessary.

The "bonus" is that you can pass 2d-arrays to fnAddData to avoid looping

datatables dynamically add row with fnAddData or similar and add a class to a specific column

2 Answers2

Linked