I encountered an issue with the data table while trying to display data from a database using AJAX and applying filters through a PHP file. The initial setup works smoothly, however, I faced a problem after implementing a column hiding feature which caused issues with filtering by certain fields.
Uncaught TypeError: Cannot read property 'value' of null at getPage (test.php?login=yes:2030) at run (test.php?login=yes:2002) at HTMLButtonElement.onclick (test.php?login=yes:2425)
// JavaScript function for handling data retrieval based on user inputs
function getPage() {
// Variable declarations for various form values
var odTermin = document.getElementById("odTermin").value;
var doTermin = document.getElementById("doTermin").value;
...
}
// Initial data retrieval using jQuery AJAX call
$('document').ready(function () {
$.ajax({
type: 'POST',
url: 'ajaxfile.php',
dataType: 'json',
data: {...},
cache: false,
success: function (result) {
if (result == null){
alert('No orders for this date!');
} else {
// Data manipulation and rendering logic goes here
console.log(result);
...
// DataTable initialization and customization
var table = $('#example').DataTable({...});
$('.toggle-vis').on('click', function (e) {
// Toggle visibility of columns in the DataTable
var column = table.column($(this).attr('data-column'));
column.visible(!column.visible());
});
}
}
});
});