Risan Bagja

snippet··1 min read

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...
});