DataTables.js：使用数据对象动态更新表

Question

我有一个页面，最初有一个空表。然后在用户选中几个框以在基于时间的折线图中添加或删除线并过滤图中的几个点后构建表格。选中的每一个框都会对应表格中的一列，行的内容就是图中的点。

因此，我不知道列的名称，也不知道列或单元格的数量。它可以是 2 到 60+ 列的任意位置，行也可以相同。

在 HTML 中我只有一个空表：

<table id="liveTable" class="table display compact" cellspacing="0" cellpadding="0">
</table>

每次用户选中一个框时，都会触发形成表格数据结构的函数：

$(document).ready(function() {
    // The function receives a plot object, which contains all the data I need
    function drawTable(plot) {

        // Get the plot object data and reset the current array to build a new table each time the function is called
        var plotData = plot.getData();
        var dataArray = []

        // Extract all the needed information to build the table
        for (i = 0; i < plotData.length; i++) {
            dataPoints = {}

            // Get only the visible data points in the graph
            var visiblePoints = plotData[i].data.filter(dp =>
            dp[0] >= plotData[i].xaxis.min && dp[0] <= plotData[i].xaxis.max &&
            dp[1] >= plotData[i].yaxis.min && dp[1] <= plotData[i].yaxis.max);

            // Build arrays for the time column and for each line of visible data points
            var dataTimes = []
            var dataValues = []
            for (k = 0; k < visiblePoints.length; k++) {
                var timestamp = new Date(visiblePoints[k][0])
                dataTimes.push(msToTime(timestamp))
                dataValues.push(visiblePoints[k][1])
            }

            // Build a string for each line and then the data points object
            var runStart = new Date(plotData[i].offset_time + plotData[i].data[0][0]);

            dataPoints["Time"] = dataTimes
            dataPoints[plotData[i].label + " " + runStart] = dataValues
            dataArray.push(dataPoints)
        }

        // Extract all column names for Datatables() columns API
        columns = []
        $.each(dataPoints, function(key, value) {
            var my_item = {};
            my_item.data = key;
            my_item.title = key;
            columns.push(my_item);
        });

        // Try to build the table with the data that was collected. This part doesn't work at all.
        $('#liveTable').DataTable({
            data: dataArray,
            "columns": columns,
            retrieve: true,
            destroy: true,
            paging: false,
            pageLength: -1
        });
    };

        // Call drawTable() every time the user pans/zooms the graph
        $("#graphContainer").bind("plotpan", function (event, plot) {
            drawTable(plot);
        });

        $("#graphContainer").bind("plotzoom", function (event, plot) {
            drawTable(plot);
        });
});

函数drawTable()在用户每次平移/缩放图形时调用，每次他们选择一个新参数来绘制图形时（在代码的其他地方，但对drawTable()的调用基本相同）

drawTable() 函数的最后一部分，我在其中定义表并没有真正在每次用户选择/过滤数据时重新形成数据表。

我传递给 DataTables API 的结果数据结构是每个 columns 的对象数组：

[
    {data: "Time", title: "Time"},
    {data: "Checkbox 1", title: "Checkbox 1"},
    {data: "Checkbox 2", title: "Checkbox 2"},
    {data: "Checkbox N", title: "Checkbox N"}
]

该解决方案来自另一个 StackOverFlow 帖子，我想我不确定这是否正是 DataTables 期望的列声明结构。

然后是表本身的dataArray（每列的对象数组）：

[{Time: Array(392)}, {Checkbox 1: Array(392)}, {Checkbox 2: Array(392)}, {Checkbox N: Array(392)}]

对于 DataTable 构造函数：

$('#liveTable').DataTable({
    data: dataArray,
    "columns": columns,
    retrieve: true,
    destroy: true,
    paging: false,
    pageLength: -1
});

所以最后表格应该看起来像：

Time       Checkbox 1       Checkbox 2       Checkbox N
00:00:01   -14.57           84.5             22.27
00:00:02   -14.62           81.2             24.75
... (repeat 390 times) ...

我不确定这是否是数据格式问题、初始化问题等。

列是数组，数据是对象，{key=column: value=[array of ints], repeat}

每次用户勾选框或过滤数据时，我都可以确认列数组的格式正确，每列的对象也是如此。

[编辑]：

添加dataSrc: '' 后，我现在得到了一些关于表格的信息。看这个截图：

这个想法是，用户将通过使用复选框在右侧表格中选择一个参数，该复选框在图表上为每个选定的参数绘制一条线，并且表格上应该为每个参数设置一列选择。在示例图片中，我只选择了一张，它应该呈现一个包含 2 列的表格，一列用于 Time（将始终存在），另一列用于所选参数。

时间列被填充，但它在单个单元格中添加所有值，并且选定的参数没有向单元格添加任何值，给出错误：

DataTables warning: table id=liveTable - Requested unknown parameter 'Sensor - F13.56I2 Thu Nov 30 2017 12:12:09 GMT+0000 (Greenwich Mean Time)' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4

转到该页面，错误是以字符串形式出现的参数，这似乎表明data 选项未在为该列传递的对象中找到数据。

我不确定为什么它无法使用该列找到数据，因为这两个字符串与您在控制台记录 columns 和 dataArray 的值时看到的完全相同：

Answer 1

添加dataSrc: '' 并更改您的dataArray 格式，如：

[{
  "Time": value,
  "Checkbox 1": value,
  ... So on
}, ... So on]