Question

我现在几个小时都在寻找答案，而我似乎无法找到答案。我用asp.net mvc开发了一个内部网web应用程序。在主页上有两个表，我们正在使用jQuery DataTables。数据是通过ajax获取的，行数变化很大。

我们的用户抱怨表调整大小取决于滚动条是否存在，如here所示。

我已经尝试了我能想到的一切。我几乎成功地在每次重绘后手动调整元素大小但是在Chrome上工作的任何东西都不适用于IE11（公司中的默认浏览器）。

这是其中一个表格的鳕鱼：

$('#ongoingParametersTable').dataTable({
        dom: "lfrti", // paginate = false
        "serverSide": true,
        "ajax": {
            "url": "AjaxHandlerOT",
            "type": "POST"
        },
        "processing": true,
        "pageLength": 99999,
        "lengthChange": false,
        "autoWidth": true,
        "info": false,
        "scrollY": $('#heightMax1').val(),
        "scrollCollapse": true,
        "order": [[3, "desc"]],
        "columns": [
            {
                "name": "Id",
                "searchable": false,
                "sortable": false,
                "render": function (data, type, oObj) {
                    return '<a href=\"ReloadTelegram?TeleId=' + oObj[0] + '&TelegramName=' + oObj[2] + '\">Select</a>';
                },
                "width": "5%"
            },
            {
                "name": "FakeId",
                "searchable": false,
                "sortable": false,
                "width": "5%"
            },
            {
                "name": "FormName",
                "width": "7%"
            },
            {
                "name": "FormDate",
                "width": "11%"
            },
            {
                "name": "Telegramme",
                "type": "natural",
                "width": "8%"
            },
            {
                "name": "Train",
                "width": "15%"
            },
            {
                "name": "Agent",
                "width": "19%"
            },
            {
                "name": "Poste",
                "width": "15%"
            },
            {
                "name": "Motive",
                "width": "15%"
            }
        ],
        "language": {
            "url": languageManagement.dataTablesLanguageUrl
        },
        initComplete: function () {
            this.api().columns().every(function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search(val ? val : '', true, false)
                            .draw();
                    });
                column.data().unique().sort(function (a, b) { return DTExtensions.naturalSort(a, b, true) }).each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>');
                });
            });
        }
});

我很欣赏任何想法，我现在非常绝望。谢谢！

Answer 1

我终于设法解决了这个问题（有点......）。如果有人偶然发现了这样的问题，我就会发布答案。

首先，我只需将滚动条固定到表格主体：

.dataTables_scrollBody { overflow-y: scroll !important;}

有了这个，桌子的主体被固定，但页眉和页脚正在起作用。接下来，解决方案根据dataTables的使用情况而有所不同。

Ajax数据

如果ajax调用收到数据，我在创建页脚下拉列表后（在dataTable选项中）在columns（）上调用draw（），如下所示：

initComplete: function () {
        this.api().columns().every(function () {
            ...
        }).draw();
    },

修复了服务器端数据

在这种情况下，当dataTables只是为现有表格设置样式时，我将其布局更改为固定并手动设置列宽。出于某种原因，ajax解决方案在这里没有用。

这不是最优雅的解决方案，但老实说，我无法找到更好的解决方案。如果有人有，请告诉我。

jQuery DataTables - 使用和不使用滚动条修复列宽

1 个答案: