Responsive plugin not calling fnCreatedCell

aquinas

If you go here:
http://jsfiddle.net/wpm0s78o/3

You'll see that the "Stuff2" column has a mRender function that renders a button. You'll also notice that everytime the render function is called, I append that fact to the body. I do the same thing when the fnCreatedCell function is called. The issue though is that (as you can see in the log on the fiddle), if you resize the window so that the column with the button shows up in the detail row, while the render function is called again, the fnCreatedCell is not called again. That's an issue because as I understand it, if you want to hook up event handlers, or whatever, fnCreatedCell is the place to do it. And it DOES work just fine as long as that column doesn't get hidden in the details by the responsive plugin, but when it does, the render method gets called, it creates a new dom element, and all the other setup that happened when the grid was originally initiated is gone.

If you click the button when the page first loads you'll see an alert. If you resize so that it goes into details and then click the button, you'll see there is no alert because the fnCreatedCell never got called.

This seems like a bug in the responsive plugin.

Any ideas?

allan

The fnCreatedCell callback is called only once in the lifetime of a cell - which is usually why it is ideal for attaching event handlers - you don't want to attach them more than once.

However, in this case, I would suggest that a delegate event handlers will be far better both for code simplicity and performance: http://jsfiddle.net/wpm0s78o/4/ .

At the moment Responsive doesn't have a callback for when a render occurs of a child row (perhaps it should!), so the delegate event handler is going to be the best way to handle it.

Allan

aquinas

Thanks for the reply Allan. So, my use case is slightly more complicated. What I was actually doing was setting some data-* properties with jquery. I don't have to do it this way, but I guess what I'm wondering is, what would be your suggestion for getting the data associated to a table row based on a button click? I could use event delegation, and that works fine to handle the button click, but in the handler, how do I get the row associated with the button? In the row created event, I suppose I could add the rowindex or data to the row, but I'm now in a detail row, so that get's kind of weird, right? I'd have to say something like:

$('#example tbody').on( 'click', 'td button', function () {
        var parentRow = $(this).closest("tr.child").prev();
        alert((parentRow.data("dt-data").Stuff));        
    } );

See: http://jsfiddle.net/wpm0s78o/5/. That's all doable. It just feels a bit weird (and fragile) and like I might be working against the API a bit and not doing things in the accepted datatables style.

allan

Yes, exactly like that. I would perhaps add a check to see if you are in the child row or the host row in order to get the parentRow correctly - but I don't really see any other option at the moment.

Perhaps DataTables' selector API should be extensible so Responsive could add abilities to it - for example the ability to pass in a child row to row() so that row().node() and friends can be used.

Ultimately I do what the selectors to be extensible in that way, but Responsive isn't something I'd thought of using with it before (it was mainly for FixedColumns and the like).

I should point out that there is only the responsive.index() method which might be of some use, or at least worth being aware of.

Allan