Datatables.net ScrollX |标题和数据列宽度问题

Question

我正在尝试为 datatables.net 表组件创建包装器，它根据表中定义的类创建和启用功能数据表。

$('table.data-table').each(function() { 
    var props = {};
    if ($(this).hasClass('select') && $(this).hasClass('multi'))
        props.select = 'multi';
    else if ($(this).hasClass('select')
        props.select = 'single';
    if ($(this).hasClass('long-table')
        props.scrollX = true;
    ...
    ...
    ...
    $(this).DataTable(props);
});

就像您在上面看到的那样，基于为所有 HTML 表启用的表 DataTable 功能中定义的类。

测试用例 1：表格应填满其容器。

测试用例 2：滚动不应造成错位。

我的问题是，如果我设置

scrollX: true

测试用例 1 失败而测试用例 2 成功。

如果我忽略

scrollX: true

测试用例 1 成功而测试用例 2 失败。 有什么可能的解决方案可以使这两个文本案例成功。我已经尝试过设置

scrollX: '100%'

，但没有得到好的结果。

我不希望采用解决方案，说明仅将

long-grid

类添加到第二个网格，并且它会自动忽略第一个网格上的

scrollX:true

。因为我们知道表中有多少列，但不知道数据中存在的字符串长度以及页面呈现的屏幕尺寸，这适用于响应式应用程序。

欢迎任何解决方案或 CSS hack。

Answer 1

忘记scrollX，使用在这个问题上提出的解决方案：

启用scrollX 时标题列与数据表不对齐

$('#DataTableID').DataTable({
  //"scrollX": true,            
  "initComplete": function (settings, json) {  
    $("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
  },
});

Answer 2

我不知道错位，但使用

scrollX: true

会使桌子无法填满其容器。为了避免这种情况，请在您的

style="width:100%"

中设置

table

数据表灵活的表格宽度

另一个解决方案是将您的 .table 包装在 .table-responsive 中 引导响应表

我希望这对某人有帮助。

Answer 3

我遇到了类似的问题，我正在获取 json 数据，但用户也可以上传其他数据。而此时我遇到了一个问题，用户请求新数据后，表头的宽度和表体的宽度变得不同。我通过删除 (scrollX: true) 并保留 (scrollY : "200px") 解决了这个问题 - 我需要一个固定的高度。这一切都在包装纸中，这就是它对我有用的原因

Answer 4

我遇到了这个问题，并想出了完美的解决方案。

解决方案是将scrollX设置为true，但仅限于视口宽度不足以显示所有列的情况。为此，您必须在断点处销毁并重新创建表。当你这样做时，你绝对会得到想要的行为！断点将取决于您的表，在下面的示例中为 576。

$(document).ready(function ($) {
    var toggleScroll = function () {

        var ww = document.body.clientWidth;
 
        const dtOpts = {
            "scrollX": (ww < 576),
            order: [],
            destroy: true
        }
        new DataTable('#myTable', dtOpts);

    };

    // Make Changes when the window is resized
    $(window).resize(function () {
        toggleScroll();
    });

    // Fire when the page first loads
    toggleScroll();
});