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.

Recommended For You

Books

Online Courses

You Might Also Like

Comments

  1. 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');
            }
        });
    }
    
    1. 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.

Leave a Reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.
(Optional)