jQuery Datatables plugin: How to specify row attributes when adding rows to table

Question

I wondered if anyone else had come across this problem. When I originally build my table in my view, I'm using a custom attribute (call it customerID) in each table row to hold information I'll need to pass down for an ajax call. However, I'm also dynamically adding rows to the table, and I can't figure out how to pass back that same information (customerID) to be put in an attribute for the row. Currently, the only thing I'm doing when adding rows is building an array of arrays of strings that map exactly to my columns. This works fine, but there's no room to send back extra information.

I guess I don't need to store that in an attribute, if there's another way to send that information back to the view when adding rows. Does anyone have any ideas on this?

Thanks.

When you set a column to hidden through the plugin (using bVisible in the settings), the plugin literally removes the column from the DOM, and stores it in a variable within the plugin. So on my own, I can't select the data out of the column because it's no longer there. — MegaMatt
– MegaMatt, Commented Jan 11, 2011 at 15:52
But you still have access to it through fnGetData. Does it not work for you? — a1ex07
– a1ex07, Commented Jan 11, 2011 at 16:55

MegaMatt · Accepted Answer · 2011-01-17 15:22:48Z

1

I was able to solve this problem by using the plugin's built-in functions to loop through the rows one by one. On the server, I created a private class that contained fields for all the information I need once I get back to the client. This includes actual values for the table cells, but also information to be placed in attributes. I create a list of these (one object = one row's worth of info), serialize them, and send them back to the calling ajax method. The following code assumes I've received the serialized string of objects back, and I'm in JS:

function(rowsToAdd) {

    var rowList = JSON.parse(rowsToAdd); // rows come back as object representations of table rows, with properties

    $.each(rowList, function(index, row) {
        var rowStringArray = [row.Prop1, row.Prop2, row.Prop3, row.Prop4];
        var rowPos = tableObject.fnAddData(rowStringArray); // add the row through the plugin, and receive the row's index in return
        var tableRowElement = tableObject.fnGetNodes(rowPos[0]); // get reference to <tr> element just added

        $(tableRowElement).attr('attributeINeeded', row.AttributeProp).attr('anotherAttributeINeeded', row.AttributeProp2);
    });
}

answered Jan 17, 2011 at 15:22

MegaMatt

23.9k39 gold badges116 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

keeehlan Over a year ago

I would never recommend this solution to somebody whose table contains a significant amount of data. It's almost never worth the performance impact to loop through every single row in the table after creation.

Tamlyn · Accepted Answer · 2013-02-01 12:55:06Z

0

Use the fnCreatedRow callback to modify the TR node after it is created.

answered Feb 1, 2013 at 12:55

Tamlyn

23.9k14 gold badges121 silver badges140 bronze badges

Collectives™ on Stack Overflow

jQuery Datatables plugin: How to specify row attributes when adding rows to table

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related