DataTables: Dynamic Ajax Parameter
On DataTables, we can pass custom query parameters for the API through ajax.data option.
$('#table').dataTable({
ajax: {
url: 'https://examples.com/api/users',
data: {
paid_plan: true,
},
},
// Omitted...
});
If these custom query parameters are dynamic like retrieved from some input elements. We have to pass these parameters as a function instead of a plain object. This way, when the user updates these input elements; we can reload the DataTable, and it will pick up the updated query parameters.
// Reload DataTable on input change.
$('input[name=paid_plan_only]').on('change', () => {
$('#table').DataTable().ajax.reload();
});
$('#table').dataTable({
ajax: {
url: 'https://examples.com/api/users',
data() {
return {
paid_plan: $('input[name=paid_plan_only]').is(':checked'),
};
},
},
// Omitted...
});