I've been working on a Laravel project where I'm utilizing DataTable JS (with server-side processing) to showcase tables. I need some customized functionalities and I intend to use the DataTable's API for that purpose. However, despite my efforts, I am unable to clear the dataTable in order to insert new data and redraw it. Can anyone assist me with this issue?
Below is the section of my JS code that is relevant:
Initializing DataTable
dt = $('#dataTable').DataTable({
'processing': true,
'serverSide': true,
'select': 'multiple',
'ajax': {
'url' :'{!! url('/') !!}/newOrderData',
'type': 'POST',
'headers': {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
},
'columns': [
{ 'data': 'id', 'name': 'id' },
{ 'data': 'name', 'name': 'name' },
{ 'data': 'area', 'name': 'area' },
{ 'data': 'estimate', 'name': 'estimate' },
],
"columnDefs": [
{ className: "orderId", "targets": [ 0 ] }
]
});
Attempting to Clear Data and Redraw with New Data
$('#areas').change(function(){
var areaId = $(this).val();
var token = "{{ csrf_token() }}";
dt.clear().draw();
$.post('{!! url('/') !!}/newOrderData',{area: areaId,_token:token}, function(newDataArray) {
dt.rows.add(newDataArray); // Add new data
dt.draw();
});
});
On triggering the change event handler, nothing seems to happen—no errors are displayed, the table only shows a processing indicator but remains unchanged.
I came across this question which I tried following, but unfortunately, the solution doesn't work for me. Any assistance would be greatly appreciated.