响应式数据表和 Bootstrap 选项卡的问题

Question

我想在 Bootstrap 选项卡中使用数据表和响应式扩展。我有这个单独工作。

$(document).ready(function() {
    $('#example').DataTable( {
        responsive: true
    } );
    $('#exampleInTab').DataTable( {
        responsive: true
    } );
} );

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $($.fn.dataTable.tables(true)).DataTable()
        .columns.adjust()
        .responsive.recalc();
});

可以看到问题here

Answer 1

原因

您的代码存在多个问题：

1. Bootstrap 库包含在 jQuery 库
之前
2. API 方法 responsive.recalc() 在 dataTables.responsive.js 中可用，因为 1.0.1，您包括版本 1.0.0。
3. 一旦 DOM 可用，就应该附加事件处理程序。

解决方案

1. 在jQuery库

之后包含Bootstrap库

2. 包括 Responsive 扩展版本 1.0.1 或更高版本

3. 使用下面的代码：

   $(document).ready(function () {
       $('#example').DataTable({
           responsive: true
       });
   
       $('#exampleInTab').DataTable({
           responsive: true
       });
   
       $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
           $($.fn.dataTable.tables(true)).DataTable()
              .columns.adjust()
              .responsive.recalc();
       });    
   });
   

演示

有关代码和演示，请参阅 updated jsFiddle。

链接

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

Answer 2

我尝试了上面的答案，但 none 奏效了。我使用 JQuery 步骤向导作为选项卡。我还必须使用 $('#datatable').css("width", '100%') 才能正常工作。

wizard.steps({
            headerTag: "h3",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            enableFinishButton: false,
            enablePagination: false,
            enableAllSteps: true,
            titleTemplate: "#title#",
            cssClass: "tabcontrol",
            onStepChanged: function (event, currentIndex, priorIndex) {

                if (currentIndex == 2) {
                    $('#datatable').css("width", '100%')
                    $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
                }
            }
        })

我的数据表在第 3 个选项卡上，因此检查 currentIndex。