Datatables 插件固定列与引导选项卡相结合答案

【问题标题】：Datatables plugin fixed column combined with bootstrap tabDatatables 插件固定列与引导选项卡相结合
【发布时间】：2017-05-09 09:50:55
【问题描述】：

第二个选项卡上显示的数据表插件固定列有问题（使用引导选项卡）

这是我的 javascript 代码

$(document).ready(function() {
  $('#PRtable').DataTable( {
    // fixedHeader: true,
    scrollX: true,
    oLanguage: {
      sInfoFiltered: ""
    },
    bFilter: false, 
    fixedColumns: { 
      leftColumns: 4 
    },
    orderable : false,
    // "aoColumnDefs": [
    // { "bSortable": false, "aTargets": [ "_all" ] }
    // ],
    scrollY: '50vh',
    scrollCollapse: true,
    paging:         false
  } );
  $('#KK2table').DataTable( {
    // fixedHeader: true,
    scrollX: true,
    oLanguage: {
      sInfoFiltered: ""
    },
    bFilter: false, 
    fixedColumns: { 
      leftColumns: 4 
    },
    orderable : false,
    "aoColumnDefs": [
      { "bSortable": false, "aTargets": [ "_all" ] }
    ],
    scrollY: '50vh',
    scrollCollapse: true,
    paging:         false
  } );
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
  });    
});
function test(e){
  document.getElementById('head'+e).innerHTML += "<br>Trident"; 
}

正如您在图片中看到的那样，该列在“第二个选项卡”上是扭曲的，但如果我将它放在第一个选项卡上，它就可以正常工作。

这里jsfiddle code

更新：我忘了提一下，如果您查看表格，您会发现一个按钮，该按钮将在第一列附加一些文本，但它似乎数据表插件会生成重复的表格，而我在该按钮上的 javascript 函数仅适用于后面的表格数据表

【问题讨论】：

标签： twitter-bootstrap datatables

【解决方案1】：

您已包含多个版本的数据表 - 1.9.4 和 1.10.15。删除旧的后它可以正常工作，请参阅updated example。

【讨论】：