JQuery raty не работает, когда столбцы JQuery datatable collapses

Question

Я использую JQuery raty внутри JQuery datatable. Он отлично работает, когда браузер находится на полной ширине. Проверяя отзывчивость, когда столбцы данных сопоставлены, звезды рати исчезают.

Как исправить это?

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

РЕШЕНИЕ

Используйте следующий код, чтобы убедиться, что управление инициализирован в свернутом и развернутом режиме с jQuery DataTables Адаптивное расширение.

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

this jsFiddle См для кода и демонстрации.

ССЫЛКА

См jQuery DataTables – Responsive extension and custom controls статьи для получения дополнительной информации.