1st Apr 2020Rows of DataTable getting displayed below DataTable Outline / Header / Footer Elements
Thanks Kevin! that did the trick. Originally, I had put the containing division in the dom specification for the datatable, because otherwise the datatable was appearing in different part of the page. But I must have resolved in the interim. This is only Week 3 of developing in Django and using jQuery plugins and Ajax, so I have been doing a lot of feeling my way through things. After your simplification, I was able to
simplify the ajax update to only update the table in the on success ajax function:
success: function(response) {
console.log('ajax success function');
console.log('tableTitle2: ' + (tableTitle || ' '));
//the call below refreshes the html for the
//the plain HTML table with id resultTableId
//that is bound to the datatable
$('#resultTableId').html(response);
console.log('after html response update');
},
and I no longer need to re-instantiate/bind the DataTable on ajax completion. I only need to update the Titles that are in the division above the DataTable.
$( document ).ajaxComplete(function() {
console.log('ajaxComplete');
// comment out - no longer necessary
// as we did not replace the division with its contents
//including the DataTable
//we only updated the html table with id resultTableId
// that the DataTable is bound to
//the existing DataTable updates itself with the new
//resultTableId contents
// varResultDataTable = $('#resultTableId').DataTable({
// destroy: true,
// paging: false,
// scrollY: 400,
// responsive: true,
// order: [],
// ordering: false,
// dom: 'Bfrti',
// buttons: [
// 'copyHtml5',
// 'excelHtml5',
// 'csvHtml5',
// 'pdfHtml5'
// ],
// });
//update the title and description of the table above the DataTable element
elemTableTitle = document.getElementById("table_title");
elemTableDesc = document.getElementById("table_description");
if (tableTitle.length > 0) if (elemTableTitle) elemTableTitle.innerHTML = tableTitle;
if (tableDesc.length > 0) if (elemTableDesc) elemTableDesc.innerHTML = tableDesc;
});