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 = [int数组]，重复}的对象

我可以确认每次用户勾选一个框或过滤数据时，该列数组的格式正确，对于每列的对象都是相同的。

[编辑]：

添加dataSrc: ''之后，我现在得到了表上的一些信息。看这张截图：

这个想法是，用户将使用复选框在右侧的表上选择一个参数，从而在图形上为所选的每个参数画一条线，并且在表格上应该为每个参数绘制一列已选择。在示例图片中，我仅选择了一个，它应该呈现一个包含两列的表格，其中一列用于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选项未在为该列传递的对象中找到数据。

我不确定为什么不能使用列来查找数据，因为两个字符串都与我在console.log中记录columns和dataArray的值完全相同：

Answer 1

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

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

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

1 个答案: