Populating SearchPanes from ServerSide
Populating SearchPanes from ServerSide

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
I think you need to reference the
columns.data
object in the options. Something like this:Kevin
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