Populating SearchPanes from ServerSide

visham

Hello,
I am populating datatable from an SQL query via AJAX. It is working fine. Now I added searchPanes option to datatable but it is not being populated. Below is the JS part of my main page:

$(document).ready(function () {
    const table = $('#parentTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: 'server_side_processing.php',
            type: 'POST'
        },
    dom: 'Plfrtip',
    searchPanes: {
        cascadePanes: true,
        serverSide: true
    },
        columns: [
            {
                className: 'details-control',
                orderable: false,
                data: null,
        searchPanes: { show: false }
            },
            { data: 'ticket_id', searchPanes: { show: true } },
            { data: 'datesubmitted', searchPanes: { show: true } },
            { data: 'applicant_name', searchPanes: { show: true} },
            { data: 'applitype', searchPanes: { show: true }},
            { data: 'status', searchPanes: { show: true }}
        ]
    });
});

Below is the JSON response that is being received on the main page:

 {
  "draw": 2,
  "recordsTotal": "6",
  "recordsFiltered": "6",
  "data": [
    {
      "id": "3",
      "name": "Username 1",
      "ticket_id": "2523759",
      "datesubmitted": "2025-05-23 15:11:02",
      "applitype": "equipment 1",
      "status": "Completed"
    },
    {
      "id": "1",
      "name": "username 2",
      "ticket_id": "3093821",
      "datesubmitted": "2025-05-16 15:16:08",
      "applitype": "equipment 2",
      "status": "In Process"
    },
    {
      "id": "6",
      "name": "Username 1",
      "ticket_id": "5381185",
      "datesubmitted": "2025-05-29 16:07:11",
      "applitype": "equipment 1",
      "status": "In Process"
    },
    {
      "id": "2",
      "name": "Username 1",
      "ticket_id": "5417207",
      "datesubmitted": "2025-05-23 10:33:08",
      "applitype": "equipment 1",
      "status": "Completed"
    },
    {
      "id": "4",
      "name": "Username 1",
      "ticket_id": "6459150",
      "datesubmitted": "2025-05-23 15:14:00",
      "applitype": "equipment 1",
      "status": "Completed"
    }
  ],
  "searchPanes": {
    "options": {
      "4": [
        {
          "label": "equipment 2",
          "value": "equipment 2",
          "total": 1,
          "count": 1
        },
        {
          "label": "equipment 1",
          "value": "equipment 1",
          "total": 5,
          "count": 5
        }
      ],
      "5": [
        {
          "label": "Completed",
          "value": "Completed",
          "total": 3,
          "count": 3
        },
        {
          "label": "In Process",
          "value": "In Process",
          "total": 3,
          "count": 3
        }
      ]
    }
  }
}

The is no error in console and from the server side. Is the JSON array malformed or is there something I am missing to populate the data in the searchPanes?

Thanks

kthorngren

I think you need to reference the columns.data object in the options. Something like this:

  "searchPanes": {
    "options": {
      "applitype": [
        {
          "label": "equipment 2",
          "value": "equipment 2",
          "total": 1,
          "count": 1
        },
        {
          "label": "equipment 1",
          "value": "equipment 1",
          "total": 5,
          "count": 5
        }
      ],
      "status": [
        {
          "label": "Completed",
          "value": "Completed",
          "total": 3,
          "count": 3
        },
        {
          "label": "In Process",
          "value": "In Process",
          "total": 3,
          "count": 3
        }
      ]
    }
  }

Kevin

visham

Hi Kevin,
Thanks for the pointer! I modified the JSON output from my PHP file to bring the columns data instead of value.
It works! The searchPanes are populated correctly.

Thanks
Visham