Мне нужно повторно инициализировать jQuery DataTable с новыми данными. Я прочитал несколько постов с похожей проблемой, и решение включает в себя уничтожение существующей таблицы данных перед повторной инициализацией. Первоначально таблица хорошо отрисовывается, но при попытке ее визуализации с изменением количества столбцов я получаю сообщение об ошибке: Uncaught TypeError: Cannot read property 'style' of undefined. Я понимаю, что эта ошибка возникает, когда количество столбцов HTML и определение столбца для DataTables не совпадают. Это означает, что исходная таблица не была успешно уничтожена. Вот код:
var dataSet1 = [{
"country": "Benin",
"year": 1996,
"water": 70.0
},{
"country": "Vietnam",
"year": 1996,
"water": 95.1
}];
var dataSet2 = [{
"country": "Benin",
"year": 2000,
"water": 75.8,
"electricity": 58.5 //additional column from the database
},{
"country": "Vietnam",
"year": 2000,
"water": 96.8,
"electricity": 63.2
}];
$('#example_dt').DataTable({
data: dataSet1,
columns: [
{ data: "country" },
{ data: "year" },
{ data: "water" }],
'searching': false
});
$('#update_data_btn').click (function(){
//$("#example_dt").DataTable().fnDestroy();
$('#example_dt').DataTable({
destroy: true,
//retrieve: true
data: dataSet2,
columns: [
{ data: "country" },
{ data: "year" },
{ data: "water" },
{ data: "electricity" }],
// "bDestroy": true,
'searching': false
} );
});
});
Я пробовал различные предложения ниже из похожих постов, но, похоже, не могу решить эту проблему. Появляется та же ошибка.
[1] Adding destroy: true
[2] Adding $("#example_dt").DataTable().fnDestroy();
[3] Adding retrieve: true
[4] Adding "bDestroy": true
[5] Using $('#example_dt').empty(); //this empties and new table not created
Вот скрипка