Client-side formatting for large Datasets

terminatingZero

I am working with a dataset that can be around 30,000+ records. Currently we are using the Scroller extension to lighten the load on the DOM. I am trying to determine when and how to do client side formatting. I have things like datetimes and a bool. The tougher of the two is the bool which represents a check mark. In the case that the bool is true it must be replaced with an image. With such a large amount of records is there a better way than brute force and mass replacement, or can I do some thing as the table scrolls?

larsonator

Hi, you can change the way a column is rendered, so that it gets printed out the way you want it.

Have a look at the examples here:
http://datatables.net/reference/option/columns.render

This wouldn't be 'mass replacement' as you are essentially overriding the render function for that column.

terminatingZero

Thank you,

So, during render time if I wanted to add a css class to all of the <td> elements that have a value of 1 in a column I would override the render function. How would I find the specific <td> that is being render? Below is some code that I just wrote testing what would happen.

                                render: function(data, type, row, meta){
                                    if (type == "display" && data == 1) {

                                    }
                                }

allan

So, during render time if I wanted to add a css class to all of the <td> elements

You can't do that with columns.render - you need to use columns.cellCreated. If you are using deferRender along with Scroller, than that might be better for performance anyway since the call is only created when it is needed.

Allan

terminatingZero

I tried out the createdCell approach and it seems to be having issues.

createdCell: function (cell, cellData, rowData, rowInd, colInd) {
                                        if (cellData == 1) {
                                            cell.addClass("acknowledged");
                                        }
                                    }

It looks like the cell.addClass() call is might be throwing an error.

EDIT: Never mind I forgot to wrap the cell in $()