Datatable not loading updated table data

pavi4u143

Hello All,
Need help urgently on below issue:
I am using the below datatable script version and applying the datatable onto my table with id=qcProcessPageTable as ('#qcProcessPageTable').DataTable();
But when the table gets updated with new string data, the datatable still loads the previous data. I tried adding destroy method ('#qcProcessPageTable').DataTable().destroy() and also tried 'clear: true' but still the datatable loads the old data table values and not the updated data table values. I added alerts to check if the new updated values are coming to my JSP page and i do see the new updated values are loading but still when the datatable loads, it loads with older data. Please help on how do i make the datatable to load the new updated values in the data table.

<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

I'm guessing you aren't using Datatables APIs to update the table. Without seeing what you are doing its hard to say specifically what to do but I would use destroy(), ie (('#qcProcessPageTable').DataTable().destroy()) before you update the table then use ('#qcProcessPageTable').DataTable(); to reinitialize after you have updated the table. Destroying before will allow Datatables to clean up anything it has added to the table so when you reinitialize there isn't anything from the previous initialization.

Kevin

pavi4u143

HI Kevin,
Thank you for your response.
Yes i am using API call (().DataTable()) but not sure what you meant by "using API for update the table"? The table data is not loaded on page load but rather user has to click a 'Refresh' button to load data, once the data is loaded and an action is performed and saved, i call the refresh action(internally) to load the updated data as well but looks like the DataTable still holds the old data and not the new.
I have tried calling destroy() on the DataTable() but its not working and i see script error on UI debug.
This is what i am trying to do:

<

script>
$(document).ready(function(){
qcTable = $('#qcProcessPageTable').DataTable({
serverSide: true,
paging: false,
searching: false,
processing: true,
ajax: "/login/qontrolDataList",
deferRender: true,
clear: true,
destroy: true
});
});
..........
var qcTable;
..........................................
$(document).on("click","#RefreshAction",function() {
qcTable.destroy();
pullDataList(); // This function loads Data onto the table as below.
qcTable.ajax.reload();
});
..........
function pullDataList(){
$.ajax({
url : "/login/qontrolDataList",
type: "GET",
dataType: 'json',
contentType: "application/json",
success: function (FilesList) {
populatePageTableData(FilesList);
},
error: function (e) {
alert('Encountered error');
}
});
}
..........
function populatePageTableData(qableDataList){
$('#qcProcessPageTable> tbody').html('');
$.each(qableDataList, function(index, value) {
$row = //Create a row with table row data;
$('#qcProcessPageTable> tbody:last').append($row);
});
qcTable = $('#qcProcessPageTable').DataTable(); //This is where i call the DataTable API

}

On click of refresh i see below error on UI debug screen
jquery.dataTables.min.js:53 Uncaught TypeError: Cannot read property 'length' of undefined
at zb (jquery.dataTables.min.js:53)
at jquery.dataTables.min.js:50
at k (jquery.dataTables.min.js:48)
at Object.success (jquery.dataTables.min.js:49)
at c (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at l (jquery.min.js:2)
at XMLHttpRequest.<anonymous> (jquery.min.js:2)

colin

It seems like there's a fair bit going on there. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin