jQuery DataTables:控制表宽度

Question

我有一个问题,使用jQuery DataTables插件控制表的宽度.该表应该是容器宽度的100%,但最终是任意宽度,而不是容器宽度.

建议表示赞赏

表声明如下所示

<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3"     width="100%">

和javascript

jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){  
    jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false  
    });  
});  `  

检查Firebug中的HTML,你会看到这一点(注意添加的样式="width:0px;")

<table id="querytableDatasets" class="display" cellspacing="0" 
cellpadding="3" width="100%" style="width: 0px;">

在样式中查看Firebug,table.display样式已被覆盖.看不出这是从哪里来的

element.style {  
  width:0;}    

-- dataTables.css (line 84
table.display { 
  margin:0 auto;  
  width:100%;  
}  

Answer 1

问题是由于dataTable必须计算其宽度 - 但是当在选项卡中使用时,它不可见,因此无法计算宽度.解决方案是在选项卡显示时调用'fnAdjustColumnSizing'.

前言

此示例显示了带有滚动的DataTables如何与jQuery UI选项卡一起使用(或者实际上是在初始化时表格处于隐藏(display:none)元素的任何其他方法).这需要特别考虑的原因是,当DataTables被初始化并且它处于隐藏元素中时,浏览器没有任何用于提供DataTables的度量,并且这将在启用滚动时在列的未对齐时要求.

解决此问题的方法是调用fnAdjustColumnSizing API函数.此函数将根据当前数据计算所需的列宽,然后重绘表 - 这正是表第一次可见时所需的.为此,我们使用jQuery UI表提供的"show"方法.我们检查是否已经创建了DataTable(注意'div.dataTables_scrollBody'的额外选择器,这是在初始化DataTable时添加的).如果表已初始化,我们会重新调整它的大小.可以添加优化以仅重新调整表的第一次显示的大小.

初始化代码

$(document).ready(function() {
    $("#tabs").tabs( {
        "show": function(event, ui) {
            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
            if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
            }
        }
    } );

    $('table.display').dataTable( {
        "sScrollY": "200px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
        ]
    } );
} );

有关详细信息,请参阅此

Answer 2

初始化dataTables时,您需要调整两个变量:bAutoWidth和aoColumns.sWidth

假设您有4列宽度为50px,100,120px和30px的列,您可以:

jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false,
        "bAutoWidth": false,
        "aoColumns" : [
            { sWidth: '50px' },
            { sWidth: '100px' },
            { sWidth: '120px' },
            { sWidth: '30px' }
        ]  
    }); 

有关dataTables初始化的更多信息,请访问http://datatables.net/usage

观察此widhts设置与您正在应用的CSS之间的交互.您可以在尝试此操作之前评论现有的CSS,以了解您的接近程度.

Answer 3

jQuery('#querytableDatasets').dataTable({  
        "bAutoWidth": false
});

Answer 4

好吧,我不熟悉那个插件,但你可以在添加数据表后重置样式吗？就像是

$("#querydatatablesets").css("width","100%")

在.dataTable调用之后？

Answer 5

我对数据表的列宽有很多问题.对我来说,神奇的解决方法就是包括这条线

table-layout: fixed;

这个css与表的整体css一致.例如,如果已声明数据表,如下所示:

LoadTable = $('#LoadTable').dataTable.....

然后魔术css行将进入类Loadtable

#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;

}

Answer 6

TokenMacGuys解决方案效果最好,因为这是jQdataTable中的错误的结果.如果你使用$('#sometabe').dataTable().fnDestroy()表格宽度设置为100px而不是100%.这是一个快速修复:

$('#credentials-table').dataTable({
        "bJQueryUI": false,
        "bAutoWidth": false,
        "bDestroy": true,
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false,
    "aoColumns": [
           { "sWidth": "140px" },
           { "sWidth": "300px" },
           { "sWidth": "50px" }       
        ],
        "fnInitComplete": function() {

            $("#credentials-table").css("width","100%");
        }

    });

Answer 7

与 Datatable 10.1 一样，这很简单。只需将 width 属性添加到 HTML 中的表格中即可。即 width="100%"，这将覆盖 DT 设置的所有 CSS 样式。

请参阅此http://www.datatables.net/examples/basic_init/flexible_width.html

Answer 8

在初始化中明确地sWidth为每列使用AND 设置宽度解决了我的(类似)问题.喜欢溢出的堆栈.bAutoWidth: falsedataTable

Answer 9

您必须至少保留一个没有固定字段的字段,例如:

$('.data-table').dataTable ({

 "bAutoWidth": false,
 "aoColumns" : [
    null,
    null,
    null,                    
    null,
    {"sWidth": "20px"},
    { "sWidth": "20px"}]
});

你可以改变所有,但只留一个为空,所以它可以拉伸.如果你把宽度放在ALL上它就行不通.希望我今天能帮到别人!

Answer 10

将此css类添加到您的页面,它将解决问题:

#<your_table_id> {
    width: inherit !important;
}