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

Posted 2023-02-22

【中文标题】响应式数据表和引导选项卡的问题

【英文标题】：Issue with Responsive DataTables And Bootstrap Tabs

【发布时间】：2015-12-17 20:57:26

【问题描述】：

我想在 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

【问题讨论】：

看不出是什么问题，你能再解释一下吗？

当然可以。有两个表格：一个在第二个选项卡内部，另一个在底部（选项卡外部）。如果您调整窗口大小，底部表格可以正常工作，而选项卡表格则不能。

可以看到here一个响应式数据表

【参考方案1】：

原因

您的代码存在多个问题：

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

解决方案

在 jQuery 库之后包含 Bootstrap 库

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

使用下面的代码：

$(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 数据表和引导选项卡最常见问题的解决方案，请参阅 jQuery DataTables – Column width issues with Bootstrap tabs。

【讨论】：

谢谢 Gyrocode。我认为作为底部表格的工作资源是有效的......在我的真实代码中没问题......但我在调用adjust（）函数时在我的javascript中有其他错误

【参考方案2】：

我尝试了上面的答案，但都没有奏效。我使用 JQuery Steps Wizard 作为选项卡。我还必须使用 $('#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();
                
            
        )

我的数据表位于第三个选项卡上，因此请检查 currentIndex。