我在 JQuery 数据表中使用 JQuery 。当浏览器处于全宽时它工作正常。在测试响应能力时,随着数据表的列折叠,比率的星星消失了。
如何解决这个问题?
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');
}
});
最佳答案
SOLUTION
使用下面的代码确保控件通过 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
参见this jsFiddle用于代码和演示。
LINKS
参见jQuery DataTables – Responsive extension and custom controls文章了解更多信息。
关于当 JQuery 数据表的列折叠时,JQuery 无法工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34391821/