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

Question

I am trying to put some "DataTables" into jQuery tabs. 我正在尝试将一些“ DataTables”放入jQuery选项卡。 I want the "DataTables" to be responsive, but it seems that they always overflow out of their tab. 我希望“ DataTables”能够响应，但是似乎它们总是从其选项卡中溢出。

Here is the code of the tabs and tables. 这是选项卡和表的代码。 I build the table before I call DataTables, so that the "DataTables" tables are responsive. 我在调用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>

I have made a CodeSnippet to illustrate the problem. 我做了一个CodeSnippet来说明问题。 Resizing the window should make the tables responsive, but notice that the tables are always overflowing out of their tab. 调整窗口大小应使表具有响应性，但请注意，表始终溢出其选项卡。

Here are some examples: 这里有些例子：

How do I make a column disappear directly when part of that column starts overflowing? 当该列的一部分开始溢出时，如何使该列直接消失？

EDIT 1 编辑1

It works now! 现在可以使用了！ I had to upgrade to the most recent releases , and used this code. 我必须升级到最新版本，并使用此代码。 based on Gyrocode.com 's answer. 基于Gyrocode.com的答案。

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

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

Answer 1

Use the code below: 使用以下代码：

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

See Column width issues with Bootstrap tabs for more details and demonstration. 有关更多详细信息和演示，请参见Bootstrap选项卡的列宽问题。

See this jsFiddle for code and demonstration. 有关代码和演示，请参见此jsFiddle 。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-04-09 16:08:24

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-04-09 16:08:24

解决方案1
1 已采纳 2016-04-09 16:08:24