Wie können DataTables innerhalb von jQuery-Registerkarten reaktionsfähig gemacht werden?

Ich versuche, einige "DataTables" in jQuery Tabs zu setzen. Ich möchte, dass die "DataTables" reaktionsfähig sind, aber es scheint, dass sie immer aus ihrer Registerkarte überlaufen.Wie können DataTables innerhalb von jQuery-Registerkarten reaktionsfähig gemacht werden?

Hier ist der Code der Registerkarten und Tabellen. Ich erstelle die Tabelle, bevor ich DataTables aufruft, damit die "DataTables" -Tabellen reagieren.

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>

Ich habe einen CodeSnippet gemacht, das Problem zu veranschaulichen. Wenn Sie die Größe des Fensters anpassen, sollten die Tabellen reaktionsfähig sein. Beachten Sie jedoch, dass die Tabellen immer über ihre Registerkarte hinauslaufen.

Hier sind einige Beispiele:

Wie kann ich eine Spalte direkt verschwinden, wenn ein Teil dieser Spalte überfüllt beginnt?

EDIT 1

Es funktioniert jetzt! Ich musste auf die meisten recent releases aktualisieren und diesen Code verwenden. basierend auf der Gyrocode.com Antwort.

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

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

Quelle

2016-04-08 joaorodr84

den Code unter Verwendung:

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

Column width issues with Bootstrap tabs für weitere Informationen und Demonstration sehen.

Code und Demonstration siehe this jsFiddle.

Quelle

2016-04-09 16:08:24

Es hat nicht funktioniert. Der Tisch läuft immer noch über wie auf den Bildern. :/ – joaorodr84

@ joaorodr84, siehe [diese jsFiddle] (https://jsfiddle.net/b1tb70ry/1/), es funktioniert für mich. –

Sie haben Recht. Es klappt. Ich werde die Lösung als EDIT meines ersten Posts schreiben. Danke vielmals. :) – joaorodr84

Wie können DataTables innerhalb von jQuery-Registerkarten reaktionsfähig gemacht werden?

Antwort

Verwandte Themen