当 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 比率不起作用的主要内容,如果未能解决你的问题,请参考以下文章

在 jQuery 数据表中指定固定的列宽

使用jQuery数据表中的列过滤器下拉列表修复标头

如果整个列数据与搜索字符串匹配,如何在jQUERY Datatable中显示/搜索数据?

jquery 数据表:添加额外的列

如何在没有定义的情况下获取 jquery 数据表的列

如何在 Jquery Datatables 中根据条件隐藏列?