Populating SearchPanes from ServerSide

Populating SearchPanes from ServerSide

vishamvisham Posts: 5Questions: 1Answers: 0

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

Replies

  • kthorngrenkthorngren Posts: 22,090Questions: 26Answers: 5,093

    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

  • vishamvisham Posts: 5Questions: 1Answers: 0

    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

Sign In or Register to comment.