Populate searchPanes.panes.options directly with a single-dimensional array
Populate searchPanes.panes.options directly with a single-dimensional array
Loren Maxwell
Posts: 387Questions: 94Answers: 10
I'm reviewing the documentation here: https://datatables.net/reference/option/searchPanes.panes.options
where it outlines this format for inputting custom options:
options: [
{
label:'Accountants in Tokyo',
value: function(rowData, rowIdx){
return rowData[2] === 'Accountant' && rowData[3] === 'Tokyo';
}
}
]
However I'm wondering if it couldn't be possible to allow inserting a single-dimension array into a searchPane, such as:
$(document).ready(function() {
var officeOptions = ["Edinburgh", "London", "New York", "San Francisco", "Singapore", "Sydney", "Tokyo"];
$('#example').DataTable({
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office",
searchPanes: {
options: officeOptions, // Or something to this effect
dtOpts: {
order: [0, "asc"]
}
}
},
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
]
});
});
Then the SearchPane would be populated with those values regardless of what is in the actual column.
To me (and I may be completely wrong) but it seems a large part of the load time for a table with searchPanes included is calculating what the options in the searchPane should be.
I believe I can more quickly do this in PHP and simply supply the array of the values, but I don't see a mechanism for doing that. Plus there might be some other reasons for wanting the searchPane to show different options than what the column itself renders, such as possible values that don't have any records.
Another approach I tried was supplying the list through dtOpts data, but it didn't work:
$(document).ready(function() {
var officeOptions = ["Edinburgh", "London", "New York", "San Francisco", "Singapore", "Sydney", "Tokyo"];
$('#example').DataTable({
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office",
searchPanes: {
options: officeOptions,
show: true,
dtOpts: {
data: officeOptions,
order: [0, "desc"]
}
}
},
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
]
});
});
This question has an accepted answers - jump to answer
Answers
Hi @Loren Maxwell ,
As of SearchPanes 1.1 server-side processing is supported if that is of interest here. Take a look at this blog post and this page.
As for setting options for a column, you can indeed do that using an array using
columns.searchPanes.options.Hope this helps,
Sandy
Thanks, @sandy.
Using
columns.searchPanes.optionswould it look like this, correct:If so, I was hoping there might be a simpler way for a single-dimension array.
Hi @Loren Maxwell ,
Yes that is how it would look and I'm afraid you couldn't make it any simpler for column specific panes. I can't see a simpler way to configure them on a per column basis.
Maybe worth noting you can also use
columnDefs, which would reduce the length of your config if you are letting DataTables detect the columns.Thanks,
Sandy
Thanks, @sandy.
My only thought is that if I provide the single-dimensional array and specified a column, then perhaps searchPanes could have a function that assigns the
labeland thevaluefunction automatically.At any rate, thanks for your help over the past couple of days with a few of my posts and certainly thanks for the wonderful extension to DataTables and the awesome support you guys always provide!