datatable踩坑

在用tab bar切换的页面里放入了两个Datatable踩的坑

问题描述

页面形态大致如此，在初始加载时，显示tab1的datatable，此时表头能够正常显示，但是切换到tab2时，表头被压缩在了一起。

原因分析

这是因为datatable的渲染依赖于父容器，由于tab的写法，导致了页面刚加载的时候不渲染tab2页面，所以tab2页面的datatable在加载时使用了自身默认值100px

解决办法

方法1

百度提供的方法

// 上方是bootstrap的选择器，具体根据实际情况来定
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $.fn.dataTable
        .tables( { visible: true, api: true } )
        .columns.adjust();
})

但是这种方法对我的页面并不起作用，并且总是提示cannot find property 'adjust'
在控制台里调试发现是table()函数下就没有columns属性了

方法2

在构造的时候保留datatable的jq对象

tableList = #("#demoTable").DataTable({
  // properties
})

#("$tab").click(function(e) {
  tableList.columns.adjust();
  // OR
  #("demoTable").DataTable().columns.adjust();
})

这样就可以强制让列重新适应页面宽度，表格就能够正常显示了

至于为什么第一种方式不行，我也没想明白，不知道为什么第一种方式没法获取到columns。。。