datatables.js:使用数据对象动态更新表

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

因此,我不知道列的名称,也不知道列或单元格的数量。它可以是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() 每次用户在图形上平移/缩放时调用,每次用户选择要绘制图形的新参数时调用(在代码的其他地方,但基本上相同的调用 小精灵 )

最后一部分 DouthTable() 函数,在该函数中,我定义的表并不是每次用户选择/筛选数据时都要重新形成数据表。

我要传递给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}的对象。

每次用户勾选一个框或筛选数据时,我可以确认columns数组的格式是否正确,每列的对象也是如此。

[编辑]:

添加后 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 选项在为该列传入的对象中找不到数据。

我不确定为什么它无法使用列找到数据,因为这两个字符串与您在控制台上看到的完全相同。 柱 和 数据阵列 :