如何使 DataTables 在 jQuery 选项卡中响应？答案

【问题标题】：How to make DataTables responsive inside jQuery tabs?如何使 DataTables 在 jQuery 选项卡中响应？
【发布时间】：2016-07-29 16:23:50
【问题描述】：

我正在尝试将一些“DataTables”放入 jQuery 选项卡中。我希望“DataTables”能够响应，但似乎它们总是溢出它们的选项卡。

这是选项卡和表格的代码。我在调用 DataTables 之前构建表，以便“DataTables”表具有响应性。

var data = {
    'Company': {
        col: ["contactid", "fullname", "age", "salary", "job"],
        row: [
            ["111", "Ryan Adams", 28, 750, "Accountant"],
            ["10", "Julie Connolly", 35, 800, "Programmer"]
        ]
    },
    'Students': {
        col: ['id', 'name', 'dateofbirth', 'grade1', 'grade2', 'grade3'],
        row: [
            ["45", "James Smith", "31/05/1984", 16, 17, 11],
            ["23", "Anne Newton", "25/03/1988", 15, 12, 18]
        ]
    }
};

$(document).ready(function() {

    var tabs = $('<div />').attr('id', 'tabs').appendTo('body');
    var listOfTabNames = $('<ul />').attr('id', 'tabNames').appendTo(tabs);

    for (var i in data) {
        var name = i;
        var idOfContentElement = 'tabContent-' + name;
        $('<li id="tabHeader-' + name + '"><a href="#' + idOfContentElement + '">' + name + '</a></li>').appendTo(listOfTabNames);
        var tabContent = $('<div />').attr('id', idOfContentElement).appendTo(tabs);

        var colData = data[i].col;
        var rowData = data[i].row;

        var table = $('<table/>').attr("id", "table-" + name)
                .addClass("display")
                .attr("cellspacing", "0")
                .attr("width", "100%")
                .appendTo(tabContent)
                ;

        var tr = $('<tr />');
        table.append('<thead>').children('thead').append(tr);

        for (var i = 0; i < colData.length; i++) {
            tr.append('<th>' + colData[i] + '</th>');
        }

        for(var r = 0; r < rowData.length; r++) {
            var tr = $('<tr />');
            table.append(tr);  
            //loop through cols for each row...
            for(var c=0; c < colData.length; c++) {
                tr.append('<td>' + rowData[r][c] + '</td>');
            }
        }

        $("#tabContent").append(table);

        $("#table-" + name).DataTable({
            responsive: true
        });
    }

    $('#tabs').tabs();
});

<!DOCTYPE html>
<html lang="pt">
    <head>
        <meta charset="UTF-8">
        <title>DataTables responsive</title>
        
        <!-- jQuery -->
        <script src="http://code.jquery.com/jquery-2.2.3.js" type="text/javascript"></script>
        
        <!-- jQuery UI -->
        <link href="http://code.jquery.com/ui/1.12.0-rc.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
        <script src="http://code.jquery.com/ui/1.12.0-rc.1/jquery-ui.js" type="text/javascript"></script>
        
        <!-- DataTables -->
        <link href="http://cdn.datatables.net/1.10.1/css/jquery.dataTables.css" rel="stylesheet">
        <script src="http://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js" type="text/javascript"></script>
        <link href="http://cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css" rel="stylesheet">
        <script src="http://cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.js" type="text/javascript"></script>
    </head>
    <body style="font-size: 11px;">
    </body>
</html>

我制作了一个 CodeSnippet 来说明这个问题。调整窗口大小应该使表格响应，但请注意表格总是溢出它们的选项卡。

这里有一些例子：

当某列的一部分开始溢出时，如何使该列直接消失？

编辑 1

现在可以了！我不得不升级到最recent releases，并使用了这个代码。基于Gyrocode.com的回答。

/* Recalculates the size of the resposive DataTable */
function recalculateDataTableResponsiveSize() {
    $($.fn.dataTable.tables(true)).DataTable().responsive.recalc();
}

$('#tabs').tabs({
    activate: recalculateDataTableResponsiveSize,
    create: recalculateDataTableResponsiveSize
});

【问题讨论】：

标签： jquery html jquery-ui datatables

【解决方案1】：

使用下面的代码：

$('#tabs').tabs({
   activate: function(event, ui) { 
      $($.fn.dataTable.tables(true)).DataTable()
         .columns.adjust()
         .responsive.recalc(); 
   }
});

查看Column width issues with Bootstrap tabs了解更多详情和演示。

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

【讨论】：

它没有用。桌子仍然像图像中一样溢出。 ://
@joaorodr84，见this jsFiddle，它对我有用。
你是对的。有用。我将把解决方案写成我的第一篇文章的编辑。非常感谢。 :)