struggling to get any filters working beyond the open text search
struggling to get any filters working beyond the open text search
Link to test case: https://dev.donationpay.org/wp-content/plugins/DonationPay_Internal/datatables_testcase.html
Debugger code (debug.datatables.net): imegas
Error messages shown: None
Description of problem:
Hi there, I'm struggling to get any filters working beyond the open text search on my serverside-generated table. I'd really appreciate any thoughts.
I have a custom function which I was hoping would allow for filtering for a particular date range, and when that didn't work I also installed the custom search builder plugin. Both trigger a redraw of the table, but neither produce filtered results. Thanks in advance for any help you can give me!
Here's my full JS:
jQuery(document).ready(function () {
// Create date inputs
let minDate = new DateTime(jQuery('#min'), {
format: 'MM-DD-YYYY'
});
let maxDate = new DateTime(jQuery('#max'), {
format: 'MM-DD-YYYY'
});
// DataTables initialisation
let dptable = jQuery('#donationpay_datatable').DataTable({
"processing": true,
"serverSide": true,
"searching": true,
buttons: ['searchBuilder'],
dom: 'Bfrtip',
"ajax": {
"url": "/wp-content/plugins/DonationPay_Internal/includes/server-side/listpayments.php",
"type": "POST",
"data": {
"clid": "1896"
}
},
"order": [[1, "desc"]],
'columns': [
{'data': 0, render: jQuery.fn.dataTable.render.number(',', '.', 2, '$')},
{'data': 1, 'type': 'date', render: function (data, type, row) {//data
if (type === 'sort') { // ADD this for sorting
return data;
} else {
return moment(data).format("MM-DD-YYYY HH:mm:ss");
}
}},
{'data': 2},
{'data': 3},
{'data': 4},
{'data': 5}
],
success: function (data, textStatus, jqXHR) {
console.log(data); //*** returns correct json data
}
});
// Refilter the table
jQuery('#min, #max').on('change', function () {
console.log('redraw on minmax change.');
dptable.draw();
});
});
jQuery.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
console.log('extender function triggered');
var min = minDate.val();
var max = maxDate.val();
var date = new Date(data[1]);
if (
(min === null && max === null) ||
(min === null && date <= max) ||
(min <= date && max === null) ||
(min <= date && date <= max)
) {
return true;
}
return false;
}
);
Answers
Search plugins, ie
jQuery.fn.dataTable.ext.search.push(..);
are used only with client side processing. With server side processing all sorting, searching and paging functions are handled by the server script. You will need to add the date range search capability to you server's data query. This example shows how to pass the values of the inputs to the server.Kevin
Ah, that makes sense! Thank you, I'll work on that.