数据表响应宽度大于父宽度

Posted 2023-05-07

【中文标题】数据表响应宽度大于父宽度

【英文标题】：Datatable responsive width more than parent width

【发布时间】：2017-11-19 01:19:50

【问题描述】：

即使在 jquery 数据表中使用响应选项，在较低的分辨率下，计算出的表宽度也会大于父 div，所以会发生这种情况：

表是这样定义的：

<table id="datatableGroupsList" class="table table-striped table-bordered responsive no-wrap table-hover partialViewPanel" cellspacing="0" >

数据表脚本是这样调用的：

/* Datatables responsive */
var dataTableGroupList = function () 
    var table = $('#datatableGroupsList').DataTable(
        responsive: true,
        "columns": [null, null, null,  "orderable": false  //Desabilitar ordenação na coluna das acções
        ],
        language: 
            url: window.location.origin + '/Home/GetLocalizationForDataTable'
        ,
        paging: true
    ).on("init", function () 
        var tt = new $.fn.dataTable.TableTools(table,
            
                "aButtons": [
                    
                        "sExtends": "copy",
                        "sButtonText": "@Resources.ResourcesGeneral.Copy",
                        "mColumns": [0, 1, 2]
                    ,
                    
                        "sExtends": "xls",
                        "mColumns": [0, 1, 2]
                    ,
                    
                        "sExtends": "pdf",
                        "mColumns": [0, 1, 2]
                    ,
                    
                        "sExtends": "print",
                        "sButtonText": "@Resources.ResourcesGeneral.Print",
                        "mColumns": [0, 1, 2]
                    
                ]
            
            );
        $(tt.fnContainer()).insertBefore('#datatableGroupsList_wrapper div.dataTables_filter');
        $('.DTTT_container').addClass('btn-group');
        $('.DTTT_container a').addClass('btn btn-default btn-md');
        $('.dataTables_filter input').attr("placeholder", "@(Resources.ResourcesGeneral.Search)..."); 

    )
    ;

$(document).ready(function () 
         dataTableGroupList();   
);

顺便说一句，这个问题和我问的差不多： jQuery DataTables: control table width 我也在使用 1.10.2 版的 datatable.js

有没有人遇到过这个问题和/或知道解决方案？谢谢。

【参考方案1】：

也许这个链接对你有帮助。 https://datatables.net/extensions/rowreorder/examples/initialisation/responsive.html

每一行的子表。

【讨论】：

您好，我不知道行重新排序如何帮助我解决问题。不过谢谢你的建议。

【参考方案2】：

这是为我做的：

定义一个新类，我称之为“wrappable”。将此类添加到数据表列类中，使其将文本包装在单元格中，因此它不会溢出到右侧的其他单元格

table.dataTable tbody td.wrappable 空白：正常；

将类应用于数据表中的列

var 列 = [ 数据：空， 标题：“请求详细信息”， className: "所有可包装", 宽度：'200px', 可排序：真， 自动宽度：假， 渲染：函数（数据，类型，行） var year = '财政年度：' + naIfNullOrEmpty(data.FISCAL_YEAR) + ''; var cycle = '循环：' + naIfNullOrEmpty(data.CdSnfCycle.NAME) + ''; var notes = '注释：' + naIfNullOrEmpty(data.NOTES) + ' '; 返回年份+周期+备注； , ]

希望对你有帮助