У меня есть страница, где изначально есть пустая таблица.Затем таблица строится после того, как пользователь установит несколько флажков для добавления или удаления линий в линейном графике на основе времени и отфильтрует несколько точек в графике.Каждый установленный флажок будет соответствовать столбцу в таблице, а содержимое строк - это точки на графике.
Таким образом, я не знаю ни имен столбцов, ни количества столбцовили клетки.Может быть от 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(), в которой я определяю таблицу, на самом деле не работает для реформирования таблицы данных каждый раз, когда пользователь выбирает / фильтруетdata.
Полученные структуры данных, которые я передаю API DataTables, представляют собой массив объектов для каждого из 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) ...
Я не уверен, что это проблема форматирования данных, проблема инициализации и т. Д.
Столбцы - это массив, а данные - это объекты с {ключ = столбец: значение = [массив целых], повторить}
Я могу подтвердить, что массив столбцов формируется правильно каждый раз, когда пользователь ставит флажок или фильтрует данные, то же самое для объектов для каждого столбца.
[ПРАВИТЬ]:
После добавления 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 не находит данные в объекте, который передается для этого столбца.
Я не уверен, почему он не можетнайдите данные, используя столбец, поскольку обе строки точно такие же, как вы можете видеть, когда я console.log: значения для columns и dataArray:
columns and dataArray">