简体   繁体   中英

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

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?

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM