响应式数据表和引导标签的问题

Issue with Responsive DataTables And Bootstrap Tabs

本文关键字：标签 问题 数据表 响应      更新时间：2023-09-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();
});

你可以在这里看到问题

原因

你的代码有多个问题:

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

解决方案

  1. 在jQuery库之后包含Bootstrap库

  2. 包含响应式扩展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();
    });    
});
演示

参见更新后的jsFiddle获取代码和演示。

与

参见jQuery数据表-引导选项卡的列宽度问题，以解决jQuery数据表和引导选项卡最常见的问题。

我尝试了上面的答案，但都不起作用。我使用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();
                }
            }
        })

My Datatable在第3个选项卡上，因此检查currentIndex .

相关文章：