首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

jQuery DataTables:控制表宽度

作者：家具销售_903 | 2023-08-29 20:26
如何解决《jQueryDataTables:控制表宽度》经验，为你挑选了9个好方法。

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

建议表示赞赏

表声明如下所示

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

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










在样式中查看Firebug,table.display样式已被覆盖.看不出这是从哪里来的
element.style {  
  width:0;}    

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


  






  
  
  

    

      

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

有关详细信息,请参阅此


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

有关详细信息,请参阅此


2> artlung..：
初始化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,以了解您的接近程度.


3> 小智..：
jQuery('#querytableDatasets').dataTable({  
        "bAutoWidth": false
});

这对我来说是正确的答案。我正在使用boostrap .table-active。数据表代码设置为它自己的宽度后，它就会妨碍您的工作。 

4> SingleNegati..：
好吧,我不熟悉那个插件,但你可以在添加数据表后重置样式吗？就像是
$("#querydatatablesets").css("width","100%")

在.dataTable调用之后？


5> 小智..：
我对数据表的列宽有很多问题.对我来说,神奇的解决方法就是包括这条线
table-layout: fixed;

这个css与表的整体css一致.例如,如果已声明数据表,如下所示:
LoadTable = $('#LoadTable').dataTable.....

然后魔术css行将进入类Loadtable 
#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;

}
这有帮助,但现在我的列都是奇怪的大小.我原以为数据最多的列占用的宽度最大. 

6> Peter Drinna..：
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%");
        }

    });



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


8> cure85..：
您必须至少保留一个没有固定字段的字段,例如:
$('.data-table').dataTable ({

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

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


9> Bahadir Tasd..：
将此css类添加到您的页面,它将解决问题:
# {
    width: inherit !important;
}



    

        
推荐阅读

        

            
        

    


    

        

            
            

                
                    devbox
                
            


            

                家具销售_903            


            

                这个屌丝很懒，什么也没留下！            

            
            


                                
                    
                    关注作者
                            


        

    



    

        
Tags | 热门标签

        

            
        

    



    

        
RankList | 热门文章

        

            
        

    





    DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6 

    Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved  devBox.cn 开发工具箱  版权所有