JQuery raty не работает, когда столбцы таблицы данных JQuery разрушаются

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 Responsive.

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

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

ССЫЛКИ

Посмотрите jQuery DataTables - Отзывчивое расширение и статью о пользовательских элементах управления для получения дополнительной информации.