当 JQuery 数据表的列崩溃时,JQuery 比率不起作用
Posted
技术标签:
【中文标题】当 JQuery 数据表的列崩溃时,JQuery 比率不起作用【英文标题】:JQuery raty not working when the columns of JQuery datatable collapses 【发布时间】:2016-03-27 07:11:35 【问题描述】:我在 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');
);
【问题讨论】:
【参考方案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');
);
演示
有关代码和演示,请参阅this jsFiddle。
链接
有关更多信息,请参阅jQuery DataTables – Responsive extension and custom controls 文章。
【讨论】:
以上是关于当 JQuery 数据表的列崩溃时,JQuery 比率不起作用的主要内容,如果未能解决你的问题,请参考以下文章