[英]Dynamically add data to DataTables
I am currently programming a crawler in Python. 我目前正在用Python编写爬虫程序。 This crawler is storing data in a mongoDB database. 该搜寻器将数据存储在mongoDB数据库中。 I would like to load the data dynamically into a table without having to reload the whole page. 我想将数据动态加载到表中,而不必重新加载整个页面。
My current (relevant) code is looking like this: 我当前的(相关)代码如下所示:
var $tagsLabel = $("<lable>")
var $tagsInput = $("<textarea>");
/* Formatting function for row details - modify as you need */
function format(d) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>' +
'<td>Raw text:</td>' +
'<td>' + d.Raw_html + '</td>' +
'</tr>' +
'</table>';
}
$(document).ready(function () {
$table = $("#dataTable")
.on("preInit.dt", function (e, settings) {
$tagsLabel.append($tagsInput);
$('.dataTables_tags').append($tagsLabel)
})
.on("init.dt", function (e, settings) {
$tagsInput.tagEditor({
delimiter: ', ',
placeholder: 'Enter search tags ...',
onChange: function (field, editor, tags) {
if (tags.length) {
if (tags.length > 1) {
$table.search(tags.join('|'), true, false).draw();
} else {
$table.search(tags[0]).draw();
}
} else {
$table.search('').draw(true);
}
},
});
})
.DataTable({
"dom": '<l<"dataTables_tags"><t>ip>',
"ajax": '/json-int',
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '',
width: "5px"
},
{"data": "Timestamp", width: "135px"},
{"data": "Title"},
{"data": "Url"},
{"data": "domain"},
{"data": "Type"},
{"data": "Raw_html", "visible": false}
//{"data": "Raw_html", "visible": false}
],
"order": [[1, 'asc']]
});
// Add event listener for opening and closing details
$('#dataTable tbody').on('click', 'td', function () {
var tr = $(this).closest('tr');
var row = $table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format(row.data()), 'no-padding').show();
tr.addClass('shown');
}
});
$('#dataTable tbody').on('click', 'td > button', function (e) {
alert('Tada!');
return false;
});
});
<table id="dataTable" class="table table-striped table-hover table-bordered table-condensed"
style="width: 100%; font-size: 12px" role="grid">
<thead>
<tr>
<th></th>
<th>Timestamp</th>
<th>Title</th>
<th>URL</th>
<th>Domain</th>
<th>Page Type</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Timestamp</th>
<th>Title</th>
<th>URL</th>
<th>Domain</th>
<th>Page Type</th>
</tr>
</tfoot>
</table>
The function I'm trying to use to update the table dynamically: 我试图用来动态更新表的函数:
function updateTable() {
$(document).ready(function () {
var t = $('#dataTable').DataTable();
$.ajax({
type: "GET",
url: "/json",
}).done(function (data) {
var parsed = JSON.parse(data);
parsed.forEach((obj, i) => {
t.row.add([
obj.Timestamp,
obj.Title,
obj.Url,
obj.domain,
obj.Type,
obj.Raw_html
]).draw(false);
});
}).fail(function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR, textStatus, errorThrown);
})
});
}
setInterval(updateTable, 5000);
The table is loading fine and if I reload the whole page, the data is loaded into the DataTable. 该表加载良好,如果我重新加载整个页面,则数据将加载到DataTable中。 Every time the function is running to update the table dynamically, I get the following error: 每次运行该函数以动态更新表时,都会出现以下错误:
DataTables warning: table id=dataTable - Requested unknown parameter 'Timestamp' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4 DataTables警告:表id = dataTable-请求的未知参数'Timestamp'为第0行,第1列。有关此错误的更多信息,请参见http://datatables.net/tn/4
I posted an example of the data I am trying to load dynamically into the table: https://myjson.com/re9cu 我发布了一个试图动态加载到表中的数据示例: https : //myjson.com/re9cu
Hopefully someone can point me in the right direction. 希望有人可以指出正确的方向。
EDIT: Sorry, maybe I did not describe the question clear enough. 编辑:对不起,也许我没有足够清楚地描述这个问题。 When I load the page the data is loaded. 当我加载页面时,数据也会加载。 But I would like to add new rows to the table when there is new data. 但是,当有新数据时,我想向表中添加新行。 the /json is providing this new data each time it is requested. / json在每次请求时都会提供此新数据。
You don't need to invent your own bicycle, it's already there https://datatables.net/examples/data_sources/ajax.html . 您不需要发明自己的自行车,它已经在https://datatables.net/examples/data_sources/ajax.html了 。 You simply should extend your DataTable initialization with corresponding parameter: 您只需使用相应的参数扩展DataTable初始化:
var t = $('#dataTable').DataTable({
ajax: '/url/to/script/feeding/data',
...
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.