jQuery DataTables: Responsive extension and custom controls

Problem

Table below demonstrates the problem with table containing custom controls and Responsive extension.

To replicate the problem, perform the following steps:

Reduce window size so that Rating column becomes hidden.
Click on green (+) icon to show additional details. Star rating control will not be shown.

Cause

This problem occurs because Responsive extension performs rendering after the call to function defined by drawCallback option. Therefore custom control initialization performed in createdRow with initRating() doesn’t see markup produced by renderer of Responsive extension and custom controls appear uninitialized.

This behavior is observed in Responsive extension versions 1.0.x and 2.0.0.

Solution

The solution is to override the default renderer for Responsive extension, call default renderer to produce an output and initialize control before returning rendered output to jQuery DataTables to display.

Alternative solution

This solution will work only with Responsive extension 2.0.0 and up. In this version responsive-display event has been added which is triggered when details for a row have been displayed, updated or hidden.

Comments

Hello! In your initRating function you set the readOnly property to true, so nothing happens when trying to change the rating. Setting this to false will fix this. I apologize if I missed something. Thanks for your efforts!

function initRating(container) {
    $('span.rating', container).raty({
        half: true,
        starHalf: 'https://cdnjs.cloudflare.com/ajax/libs/raty/2.7.0/images/star-half.png',
        starOff: 'https://cdnjs.cloudflare.com/ajax/libs/raty/2.7.0/images/star-off.png',
        starOn: 'https://cdnjs.cloudflare.com/ajax/libs/raty/2.7.0/images/star-on.png',
        readOnly: true,
        score: function() {
            return $(this).attr('data-score');
        }
    });
}

Michael Ryvkin says:

April 6, 2016 at 3:59 pm

John, thanks for your suggestion. My goal was to show how initialize custom controls with Responsive extension. In the meantime specific configuration of the control is up to the developer, my article just shows read-only rating control as an example.

Reply

This case does not work when I put readonly in false

How to add bootstrap switch on it? So it works as in your example.

Problem

Cause

Solution

Alternative solution

You May Also Like

Michael Ryvkin

Comments

Leave a Reply Cancel reply