jQuery DataTables:控制表宽度

时间:2009-03-03 02:56:00

标签: jquery datatables jquery-datatables

我在使用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%;  
}  

26 个答案:

答案 0 :(得分:57)

问题是由于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 ] }
        ]
    } );
} );

有关详细信息,请参阅this

答案 1 :(得分:52)

初始化dataTable时,您需要调整两个变量:bAutoWidthaoColumns.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,看看你有多接近。

答案 2 :(得分:46)

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

这样的东西
$("#querydatatablesets").css("width","100%")
在.dataTable调用之后

答案 3 :(得分:46)

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

答案 4 :(得分:11)

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

table-layout: fixed;

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

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

然后魔术css行将进入类Loadtable

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

}

答案 5 :(得分:7)

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%");
        }

    });

答案 6 :(得分:5)

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

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

答案 7 :(得分:5)

使用sWidth为每列明确设置宽度和bAutoWidth: false初始化dataTable解决了我的(类似)问题。喜欢溢出的堆栈。

答案 8 :(得分:5)

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

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

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

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

答案 9 :(得分:4)

与Datatable 10.1一样,这很简单。只需在HTML中将width属性放入表中即可。 ie width =“100%”,这将覆盖DT设置的所有CSS样式。

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

答案 10 :(得分:4)

"fnInitComplete": function() {
    $("#datatables4_wrapper").css("width","60%");
 }

这可以很好地调整整个表格宽度。谢谢@Peter Drinnan!

答案 11 :(得分:3)

这里没有一个解决方案适合我。甚至datatables homepage上的示例也无效,因此在show选项中初始化数据表。

我找到了问题的解决方案。诀窍是使用激活选项作为标签,并在可见表格上调用fnAdjustColumnSizing()

$(function () {

// INIT TABS WITH DATATABLES
$("#TabsId").tabs({
    activate: function (event, ui) {
        var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();
        if (oTable.length > 0) {
            oTable.fnAdjustColumnSizing();
        }
    }
});

// INIT DATATABLES
// options for datatables
var optDataTables = {
    "sScrollY": "200px",
    "bScrollCollapse": true,
    "bPaginate": false,
    "bJQueryUI": true,
    "aoColumnDefs": [
        { "sWidth": "10%", "aTargets": [-1] }
    ]
};
// initialize data table
$('table').dataTable(optDataTables);

});

答案 12 :(得分:2)

你是否在准备好的活动中这样做?

$(document).ready(function() { ... });

调整大小很可能取决于文档是否已满载。

答案 13 :(得分:2)

只是说我和你有完全相同的问题,虽然我只是将JQuery应用于没有任何Ajax的普通表。出于某种原因,Firefox在揭示它之后不会扩展表格。我通过将表放在DIV中,然后将效果应用到DIV来解决问题。

答案 14 :(得分:1)

对于使用固定标题插件调整表格/单元格宽度时遇到问题的任何人:

Datatables依赖于列标签参数的thead标签。这是因为它真的是唯一的原生html,因为大多数表的内部html都是自动生成的。

然而,发生的情况是您的某些单元格可能大于存储在单元格内部的宽度。

即。如果你的表有很多列(宽表)并且你的行有很多数据,那么调用“sWidth”:改变td单元格大小将无法正常工作,因为子行根据溢出内容自动调整td的大小表初始化并传递其init参数后发生这种情况。

原始thead“sWidth”:参数被覆盖(缩小),因为数据表认为您的表的默认宽度仍为%100 - 它无法识别某些单元格溢出。

为了解决这个问题,我想出了溢出宽度,并通过在表表初始化之后相应地调整表来解决它 - 当我们在它时,我们可以初始化我们的固定头。同一时间:

$(document).ready(function() {
  $('table').css('width', '120%');
  new FixedHeader(dTable, {
        "offsetTop": 40,
      });
});

答案 15 :(得分:1)

在ajax调用的“成功”内创建你的fixedheader,你不会在标题和行中有任何对齐问题。

success: function (result) {
              /* Your code goes here */

    var table = $(SampleTablename).DataTable();

        new $.fn.dataTable.FixedHeader(table);
}        

答案 16 :(得分:1)

希望这可以帮助那些仍在努力的人。

不要将桌子放在任何容器内。在表格渲染后,将表格的包装器作为容器。我知道这可能在你和桌子上有其他东西的地方无效,但是你可以随时追加那些内容。

对我来说,如果你有一个侧边栏和一个实际上是该边栏偏移量的容器,就会出现这个问题。

$(YourTableName+'_wrapper').addClass('mycontainer');

(我添加了一个面板 - 默认)
而你的班级:

.mycontainer{background-color:white;padding:5px;}

答案 17 :(得分:1)

找到关于这个问题的另一个有用的链接,它解决了我的问题。

<table width="100%">
<tr>
    <td width="20%"> Left TD <td>
    <td width="80%"> Datatable </td>
</tr>
</table>

Datatables force width table

答案 18 :(得分:0)

我有类似的问题,发现列中的文本没有中断并使用此css代码解决了问题

th,td{
max-width:120px !important;
word-wrap: break-word
}

答案 19 :(得分:0)

确保bAutoWidth&amp;之前的所有其他参数正确输入了aoColumns。之前的任何错误参数都会破坏此功能。

答案 20 :(得分:0)

我有一个类似的问题,表的内容比表头和页脚大。在表格周围添加div并设置x-overflow似乎已经解决了这个问题:

        

答案 21 :(得分:0)

当桌子周围有一个div时,我遇到了类似的问题。

添加位置:相对固定它。


#report_container {
 float: right;
 position: relative;
 width: 100%;
}

答案 22 :(得分:0)

这是我这样做的方式..

$('#table_1').DataTable({
    processing: true,
    serverSide: true,
    ajax: 'customer/data',
    columns: [
        { data: 'id', name: 'id' , width: '50px', class: 'text-right' },
        { data: 'name', name: 'name' width: '50px', class: 'text-right' }
    ]
});

答案 23 :(得分:0)

我今天遇到同样的问题。

我用一种棘手的方法来解决它。

我的代码如下。

$('#tabs').tabs({
    activate: function (event, ui) {
       //redraw the table when the tab is clicked
       $('#tbl-Name').DataTable().draw();
    }
});

答案 24 :(得分:0)

也请检查此解决方案。这可以轻松解决我的DataTable列宽问题

JQuery DataTables 1.10.20引入了columns.adjust()方法,该方法解决了Bootstrap切换选项卡问题

 $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
    $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );

请参阅文档:Scrolling and Bootstrap tabs

答案 25 :(得分:-1)

这很好用。

#report_container {
   float: right;
   position: relative;
   width: 100%;
}