Datatables serverside and searchPanes issue

latinunit

I was previously using javascript data as source and given to performance issues I created an custom API endpoint that would return the data in JSON format.

Here is my previous code that was using javascript data as source https://live.datatables.net/nubafowe/2/edit

Here is the new webapp code (front end) https://www.codedump.xyz/xml/ZAqDYT8Cbr0SWHzg
where basically the only difference is using serverSide

var table= $('#recipients').DataTable({   
        serverSide: true,
        processing:true,
        ajax: {
                url: '/sch/subscriptionAPI_v15.jssp',
                type: 'POST'
               },    

Here is my new endpoint code(backend) returning the data structure https://www.codedump.xyz/ts/ZAqGw0QQ5OU9IFNp

Here is a screenvideo of how the webapp now doesnt work https://somup.com/c0e6VFyw0f the searchpanels are all over the place after changing to serverside.

Here is the JSON data structure returned by the API

{
  "draw": 1,
  "recordsTotal": 5,
  "recordsFiltered": 5,
  "data": [
    {
      "id": "13297734",
      "cmOneID": "134891",
      "email": "13300339@email.com",
      "name": "F13300339 S13300339",
      "jurisdiction": "SCPB - LON",
      "blackList": "0",
      "rm": "Domenica Zampatti",
      "lawfulBasis": "Consent given",
      "subscriptions": "3218160,3218150,15656200,3218161"
    },
    {
      "id": "13218386",
      "cmOneID": "500131",
      "email": "500131@email.com",
      "name": "500131 - First Name 500131 - Last Name",
      "jurisdiction": "Guernsey",
      "blackList": "0",
      "rm": "Euan Dangerfield",
      "lawfulBasis": "None",
      "subscriptions": ""
    },
    {
      "id": "13218387",
      "cmOneID": "500132",
      "email": "500132@email.com",
      "name": "500132 - First Name 500132 - Last Name",
      "jurisdiction": "Guernsey",
      "blackList": "0",
      "rm": "Euan Dangerfield",
      "lawfulBasis": "None",
      "subscriptions": ""
    },
    {
      "id": "13218388",
      "cmOneID": "500133",
      "email": "500133@email.com",
      "name": "500133 - First Name 500133 - Last Name",
      "jurisdiction": "Guernsey",
      "blackList": "0",
      "rm": "Julian Winser",
      "lawfulBasis": "None",
      "subscriptions": ""
    },
    {
      "id": "13218410",
      "cmOneID": "500155",
      "email": "500155@email.com",
      "name": "500155 - First Name 500155 - Last Name",
      "jurisdiction": "Guernsey",
      "blackList": "0",
      "rm": "Euan Dangerfield",
      "lawfulBasis": "None",
      "subscriptions": ""
    }
  ]
}

latinunit

So now I set the serverside to false but leaivng the json API data source and it still loads correctly, but it seems datatables isnt sending the start and length for my API to return paginated results and therefore my endpoint is sending all records and this is slow down the webapp

serverSide: false,

allan

In that image, if you click the "Request" tab in the inspector, what does it show?

Allan

latinunit

I think if serverSide is set to false, then pagination doesnt work, and datatables doesnt send the request for draw, start and length values.

kthorngren

You are correct. If you disable server side processing then Datatables is in client side processing mode and expects all the data at the client. The server side processing parameters are not sent in the ajax request.

Kevin