在手风琴菜单中使用数据表时，标题未正确呈现？

Question

在下面的图像表中，标题未正确呈现。 jQuery Dtatables以手风琴菜单显示。

我的代码如下所示：

$('#'+initId).DataTable({
    "responsive": true,
    "scrollY": "260px",
    "scrollCollapse": true
});

Answer 1

  

<强>解

您需要在显示内容时处理事件，并在事件处理程序中调用responsive.recalc()和columns().adjust() API方法。这将在显示更改后重新计算列宽。

$('#'+initId).DataTable()
    .columns.adjust()
    .responsive.recalc();

有关详细信息，请参阅responsive.recalc()和columns().adjust() API方法。

  

<强>样本

请参阅this jsFiddle以获取代码和演示。

  

<强>链接

有关jQuery DataTables和Bootstrap选项卡最常见问题的解决方案，请参阅jQuery DataTables – Column width issues with Bootstrap tabs。

Answer 2

它的工作正常我:)。

function tableInitialize(initId){
  table = $('#'+initId).DataTable({
        "responsive": true,
        "scrollY": "260px",
        "scrollCollapse": true,
        "scrollX": true,
        "responsive":true
  });   
  $('#div').click(function(){
    table.columns.adjust()
         //.responsive.recalc();
  });}