Question

我对“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);

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

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

Answer 1

尝试datatable.empty（）而不是清除。这看起来像是重置了所有元素属性。

Answer 2

由于您使用带有scrollY选项的Scroller扩展程序，因此请使用scroller.measure() API方法代替columns.adjust()。

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

Answer 3

注释掉代码中的任何scrollY / scrollX或sScrollX / sScrollY并交换“ scrollCollapse”：false，与“ bScrollCollapse”：true，我认为您不需要使用 “自动宽度”：true， “ fixedHeader”：是的，此后，希望它能起作用：D祝你好运！

Answer 4

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

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

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

更新表时，数据表标题收缩

4 个答案: