Multiple datatable instances on one page - 413 (ResponseTooLarge)

YOM

Hi, I have two datatable instances in my React application. They have the same configuration essentially- but the second instance is behaving strangely. It isn't attaching default parameters to the request.

Is this a known issue with multiple instances of the datatable API?

const createDatatable = (columns) => {
  renderHiddenHtmlTable();

  return $("#temp-dt-edit-table").DataTable({
    ajax: {
      url: `${baseURL}/datatables/main`,
      contentType: "application/json",
      type: "POST",
      data: function (d) {
        console.log(d); // empty object
        d.start = 0;
        d.length = 10;
        d.columns = columns;
        return JSON.stringify(d);
      },
    },
    columns: columns,
    options: {
      destroy: true,
      pageLength: 10,
      paging: true,
      pagination: true,
      serverSide: true,
    },
  });
};

Even adding the start and length parameters to the request doesn't work- the server keeps trying to return all 44k rows rather than a single page. I've tried various pageLength and d.length values to no avail. Please help!

kthorngren

You have the config options in the options object. Datatables isn't expecting to find them there. See the Options docs. The config should look more like this:

  return $("#temp-dt-edit-table").DataTable({
    ajax: {
      url: `${baseURL}/datatables/main`,
      contentType: "application/json",
      type: "POST",
      data: function (d) {
        console.log(d); // empty object
        d.start = 0;
        d.length = 10;
        d.columns = columns;
        return JSON.stringify(d);
      },
    },
    columns: columns,
    destroy: true,
    pageLength: 10,  // default value, not needed
    paging: true,  // default value, not needed
    pagination: true,  // Not a Datatables option
    serverSide: true,
  });

You can use the browser's network inspector to see what is being sent, ie, the ajax.data parameters you are sending. You shouldn't need to send the start and length values.

If you are still having 44k rows returned, verify what is being sent using the browser's network inspector tool. Likely you will need to debug the server script to determine why its returning 44k rows instead of the rows for the page.

Kevin