JQuery raty not working when the columns of JQuery datatable collapses

Question

I am using JQuery raty inside JQuery datatable. It works fine when the browser is at its full width. While testing the responsiveness as the columns of the datatable is collpsed, the stars of raty disappears.

How do I fix this?

HTML:

<td>
<span class="rating" data-score=""></span>
</td>

JS:

$('span.rating').raty({
    half: true,
    starHalf:'raty/images/star-half.png',
    starOff:'raty/images/star-off.png',
    starOn:'raty/images/star-on.png',
    readOnly: true,
    score: function () {
        return $(this).attr('data-score');
    }
});

Answer 1

SOLUTION

Use the code below to make sure that control is properly initialized in collapsed and expanded mode with jQuery DataTables Responsive extension.

$(document).ready(function() {
  var table = $('#example').DataTable({
    responsive: {
      details: {
        renderer: function(api, rowIdx, columns) {
          var $details = $.fn.DataTable.Responsive.defaults.details.renderer(api, rowIdx, columns);

          initRating($details);          

          return $details;
        }
      }
    },
    drawCallback: function(settings) {
      var api = this.api();
      initRating(api.table().container());
    }
  });
});

function initRating(row) {
  $('span.rating', row).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');
    }
  });
}

DEMO

See this jsFiddle for code and demonstration.

LINKS

See jQuery DataTables – Responsive extension and custom controls article for more information.