How to alter datatables ajax.data request body on button click

Question

I would like to fetch data on page load and then have filters that can be clicked to refetch the data. The query is a post request because the query parameters are complex and should be represented as json for logical grouping.

The code is as follows:

// table initialization
table = $('my_table').DataTable({
  processing: true,
  ajax: {
    url: 'api/v1/get_documents',
    type: 'POST',
    contentType: "application/json; charset=utf-8",
    data: () => {
      return JSON.stringify({
        doc_filters: {
          archived: false,
          doc_type: 'accounting'
        },
      })
    },
  },
  columns: my_columns,
});


$('#archive_button').click(() => {
  table.ajax.data = () => {
    return JSON.stringify({
      project_filters: {
        archived: true,
      }
    });
  };
  table.ajax.reload();
})

I would like the request body to reflect the new project_filters state with archived = true, refetch the data with this new request body, and update the table to reflect the new data. This does not update the request json body.

Just a suggestion, as I have not tested your specific scenario. The reload() function re-uses the ajax definition as defined in the DataTable configuration. Although you are using a function for your data, the actual archived value in the function is hard-coded to false. My approach in similar situations is to make that a variable (initially set to false), and then have the click() event update the value of the variable to true, prior to calling reload(). There may be other/better approaches, also. — andrewJames
– andrewJames, Commented May 10, 2022 at 15:14
I was able to use your philosophy to come up with a solution. Thank you @andrewJames — Baylor
– Baylor, Commented May 10, 2022 at 15:36

Baylor · Accepted Answer · 2022-05-10 15:35:19Z

With the help of @andrewJames's suggestion I was able to refactor my code as follows:

// table initialization
table = $('my_table').DataTable({
  processing: true,
  ajax: {
    url: 'api/v1/get_documents',
    type: 'POST',
    contentType: "application/json; charset=utf-8",
    data: () => {
      archiveStatus = $('#archive_button').val();
      documentType = $('#document_type').val();
      return JSON.stringify({
        doc_filters: {
          archived: archiveStatus,
          doc_type: documentType
        },
      })
    },
  },
  columns: my_columns,
});


$('#archive_button, #document_type').click(() => {
  table.ajax.reload();
})

Collectives™ on Stack Overflow

How to alter datatables ajax.data request body on button click

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related