javascript - datatables dynamically add row with fnAddData or similar and add a class to a specific column - Stack Overflow

admin管理员组

文章数量:1334799

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?

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?

• javascript
• jquery
• datatables

Share Improve this question Follow edited Jan 12, 2013 at 2:36 dreamcrash 51.7k2626 gold badges111111 silver badges132132 bronze badges asked Jan 11, 2013 at 20:59 chrischris 37k5353 gold badges147147 silver badges256256 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I think you could acplish 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/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/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

本文标签：