Multiple datatable instances on one page - 413 (ResponseTooLarge)

Multiple datatable instances on one page - 413 (ResponseTooLarge)

YOMYOM Posts: 53Questions: 22Answers: 1

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!

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,278Questions: 26Answers: 4,766
    edited July 2023 Answer ✓

    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

Sign In or Register to comment.