更新表时数据表标题缩小答案

【问题标题】：Datatable Header shrinking when table is updated更新表时数据表标题缩小
【发布时间】：2017-12-15 19:29:50
【问题描述】：

我对“DataTable”表有疑问。当我刷新/更新表格时，标题未对齐。示例如下图所示。

表格在开始时被初始化并放置在下拉字段中。然后使用清除、更新表格和绘制表格的功能进行更新。如果正在更新表格并且按下显示放置表格的下拉字段的按钮，则会发生如下图所示的情况。更新后，标题会自动更正为正常宽度。

HTML 部分：

<table id="mainTable" class="dataTable" style="width:100%;">
    <thead bgcolor="#fd7e14" class="maintablehead">
        <th>Coin</th>
        <th>Vol</th>
        <th>% Change</th>
        <th>Last price</th>
    </thead>
    <tbody id="mainTableBody">
    </tbody>
</table>

表声明部分：

var a = $('#mainTable').DataTable({
data: dataInput,
columns: [
    { data: "symbol" },
    { data: "vol" },
    { data: "change"},
    { data: "price" }
],
"columnDefs": [
    { "type": "any-number", targets: 1 },
    { "type": "any-number", targets: 2 },
    { "type": "any-number", targets: 3 },
    { "className": "dt-center", "targets": "_all" },
    {
        targets:2, render: function ( data, type, row ) {
            var color = 'black';
            if (data > 0) {
                color = 'green';
            } 
            if (data < 0) {
                color = 'red';
            }
            if (data == 0) {
                color = 'black';
            }
            return '<span style="color:' + color + '">' + data + '</span>';
            }
    }
],
"paging": false,
"info": false,
"order": [[0, "desc"]],
"scrollY": "400px",
"scrollCollapse": false,
"auto-width": true,
"fixedHeader": true,
"language": {
    "zeroRecords": "No symbol found on selected exchange",
    "search": "Enter symbol:",
},
"initComplete": function () {
    $(document).on("click", " #mainTable tbody tr[role='row']", function () {
        var id = $(this).children('td:first-child').text();
        document.getElementById("coin-name").innerHTML = id;
        widget.onChartReady(function () {
            var chart = widget.activeChart();
            chart.setSymbol(id);
        })
    });
},
});

我使用以下代码每 10 秒刷新一次表格。

var datatable = $('#mainTable').dataTable().api();
datatable.clear();
datatable.rows.add(dataInput);
datatable.columns.adjust().draw(false);

如何防止这种情况发生？我在数据表论坛中搜索并尝试了许多解决方案，但没有任何效果。将头的宽度设置为 100% 不起作用。

我正在使用 2 张桌子，两者都有相同的问题。

【问题讨论】：

标签： jquery html datatables

【解决方案1】：

尝试 datatable.empty() 而不是 clear。这看起来像是在重置所有元素属性。

【讨论】：

api.jquery.com/empty 试试直接清空ID $('#mainTable').empty()

【解决方案2】：

因为您正在使用带有 scrollY 选项的 Scroller 扩展，所以请使用 scroller.measure() API 方法而不是 columns.adjust()。

var datatable = $('#mainTable').DataTable();
datatable.clear();
datatable.rows.add(dataInput);
datatable.scroller.measure().draw(false);

【讨论】：

【解决方案3】：

注释掉代码中的任何 scrollY/scrollX 或 sScrollX/sScrollY 并将 "scrollCollapse": false 与 "bScrollCollapse": true 交换，我觉得您不需要使用 “自动宽度”：真， “fixedHeader”：是的，在此之后，希望它能正常工作：D 祝你好运！

【讨论】：

【解决方案4】：

我一直在与这个错误作斗争（实际上认为这是一个错误），终于找到了可能的解决方案。

如果您可以按列排序，只需使用 html DOM 单击任何标题元素（来自 dataTable），一旦您获得要显示的整行。

let element = document.querySelector('th');
element.click();

【讨论】：