Question

我试图将一些“DataTables”放入jQuery选项卡中。我希望“DataTables”具有响应性，但似乎它们总是溢出其标签。

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

<?php
function listing($status)
{     
    $this->db->select('student_info.*,admin.status');
    $this->db->from('student_info');
    if($status==0) 
    {
        $this->db->where('student_info.admin_id',$admin_id);
    }
    $this->db->join('admin','admin.admin_id = student_info.admin_id');
    $query = $this->db->get();
    return $query->result();
}
?>

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();
});

我已经制作了一个CodeSnippet来说明问题。调整窗口大小应该使表格响应，但请注意表格总是溢出其标签。

以下是一些例子：

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

编辑1

现在有效！我不得不升级到最recent releases，并使用此代码。根据{{3}}的回答。

<!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>

Answer 1

使用以下代码：

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

有关详细信息和演示，请参阅Column width issues with Bootstrap tabs。

请参阅this jsFiddle以获取代码和演示。

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

1 个答案: