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?

Answer 1

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