Client-side formatting for large Datasets

Client-side formatting for large Datasets

terminatingZeroterminatingZero Posts: 3Questions: 1Answers: 0

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?

Answers

  • larsonatorlarsonator Posts: 54Questions: 4Answers: 2
    edited August 2014

    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.

  • terminatingZeroterminatingZero Posts: 3Questions: 1Answers: 0

    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) {
    
                                        }
                                    }
    
  • allanallan Posts: 63,601Questions: 1Answers: 10,486 Site admin

    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

  • terminatingZeroterminatingZero Posts: 3Questions: 1Answers: 0
    edited August 2014

    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 $()

This discussion has been closed.