Question

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

表的定义如下：

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

datatables脚本调用如下：

/* 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 我还使用了datatable.js的1.10.2版本

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

Answer 1

可能是这个链接可以帮到你。 https://datatables.net/extensions/rowreorder/examples/initialisation/responsive.html

每行中的子表。

Answer 2

这是为我做了什么：

定义一个新类，我称之为＆＃34; 可缠绕＆＃34;。将此类添加到datatable列类使得它将文本包装在单元格中，因此它不会溢出到右侧的其他单元格

table.dataTable tbody td.wrappable { 空白：正常; }
将类应用于dataTable中的列

var columns = [ { 数据：null，标题：＆＃34;请求详细信息＆＃34;， className：＆＃34; all wrappable＆＃34;，宽度：＆＃39; 200px＆＃39;， sortable：是的， autoWidth：false， render：function（data，type，row）{ var year =＆＃39;财政年度：＆＃39; + naIfNullOrEmpty（data.FISCAL_YEAR）+＆＃39;＆＃39 ;; var cycle =＆＃39;周期：＆＃39; + naIfNullOrEmpty（data.CdSnfCycle.NAME）+＆＃39;＆＃39 ;; var notes =＆＃39;
注意：＆＃39; + naIfNullOrEmpty（data.NOTES）+＆＃39; ＆＃39 ;; 返回年份+周期+笔记; } }， ]

希望这有帮助

数据表响应宽度超过父宽度

2 个答案: