CODEWITHSUNDEEP
jqueryhtmljquery-uidatatables
joaorodr84
joaorodr84

Reputation: 1332

How to make DataTables responsive inside jQuery tabs?

I am trying to put some "DataTables" into jQuery tabs. I want the "DataTables" to be responsive, but it seems that they always overflow out of their tab.

Here is the code of the tabs and tables. I build the table before I call DataTables, so that the "DataTables" tables are responsive.

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. Resizing the window should make the tables responsive, but notice that the tables are always overflowing out of their tab.

Here are some examples:

overflowing

overflowing2

How do I make a column disappear directly when part of that column starts overflowing?

EDIT 1

It works now! I had to upgrade to the most recent releases, and used this code. based on Gyrocode.com's answer.

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

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

Upvotes: 0

Views: 4368

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58920

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.

See this jsFiddle for code and demonstration.

Upvotes: 1

Related Questions