Question

我要求在每个数据表头中显示图标。现在问题是图标和文本由于列宽而没有显示在同一行。我想将每个标题单元格增加50px。

下面是我的代码，用于显示图标和增加宽度。

"fnHeaderCallback": function( nHead, aData, iStart, iEnd, aiDisplay ) {
    $.each($('.table tr th'),function(key,val){
       var title=nHead.getElementsByTagName('th')[key].innerHTML;
       var new_width=parseInt($(nHead.getElementsByTagName('th')[key]).attr('style').split(":")[1].split("px")[0])+50 +"px"
       $(nHead.getElementsByTagName('th')[key]).attr('style','width:'+new_width)
       nHead.getElementsByTagName('th')[key].innerHTML = "<i class='fa fa-cube'></i>"+title;
    })
}

注意：我使用的是dataTables 1.9.4

Answer 1

fnHeaderCallback()不是在这里使用的正确回调，因为它在每次重绘时被调用。当用户排序，更改页面等时调用它。您应该使用fnInitComplete()代替。

标题标题变为多行的原因主要是由浏览器默认值和CSS设置（或缺少相同）引起的。添加此CSS：

.dataTable th {
    white-space: nowrap;
}

并在fnInitComplete()回调中添加图标：

var table = $('#example').dataTable({
  fnInitComplete: function() {
      $("#example th").each(function() {
          var $th = $(this);
          $th.html("<i class='fa fa-cube'></i>"+$th.text());
      })    
  }
});

演示 - ＆gt;的 http://jsfiddle.net/2hLn31gp/

根本没有理由以编程方式操纵标题的宽度。宽度是

用户定义的宽度，即aoColumns :[ { sWidth: "10%" }]等

计算宽度，其中dataTables计算每列所需的最小宽度，以根据表格宽度显示其内容为100％。尝试以编程方式增加宽度（通过向每个增加50px）将宽度增加到100％+（50px * columnCount） - 这不是您想要的。

1和2的组合。

如果您需要重新计算列的宽度，只需使用fnAdjustColumnSizing()重新计算它们：

table.fnAdjustColumnSizing();

或“手动”强制宽度：

aoColumns: [ { sWidth: "100px" }, { sWidth: "50px" }, { sWidth: "250px" } ]

将每个数据表头的宽度增加20 px

1 个答案: