jQueryのタブ内でDataTableを反応させる方法は？

私はいくつかの "DataTables"をjQueryのタブに入れようとしています。私は、 "DataTables"が反応するようにしたいが、彼らは常に彼らのタブから溢れているようだ。jQueryのタブ内でDataTableを反応させる方法は？

以下は、タブと表のコードです。私は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を行いました。ウィンドウのサイズを変更するとテーブルが反応しますが、テーブルは常にタブからオーバーフローしています。

ここではいくつかの例があります：

がどのように私は、その列の一部があふれ起動時に列が直接消える作るのですか？

EDITは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 
});

出典

2016-04-08 joaorodr84

以下のコードを使用します。

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

の詳細やデモンストレーションのためColumn width issues with Bootstrap tabsを参照してください。

コードとデモンストレーションについては、this jsFiddleを参照してください。

出典

2016-04-09 16:08:24

動作しませんでした。テーブルはまだ画像のようにオーバーフローします。：/ – joaorodr84

@ joaorodr84、[this jsFiddle]（https://jsfiddle.net/b1tb70ry/1/）をご覧ください。 –

あなたはそうです。できます。私は私の最初の投稿の編集として解決策を書いていきます。どうもありがとう。 :) – joaorodr84

jQueryのタブ内でDataTableを反応させる方法は？

答えて

関連する問題