解决方案
使用下面的代码确保控件在折叠和展开模式下使用 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');
}
});
}
演示
有关代码和演示,请参阅此 jsFiddle。
链接
有关更多信息,请参阅jQuery DataTables – 响应式扩展和自定义控件文章。