How to create a search pane for data not displayed in the table?
How to create a search pane for data not displayed in the table?
As the title suggests, i would like to display a search pane for data that is not displayed in the table.
var table = $('#reportTable').DataTable({
searchPanes: {
layout: 'columns-3'
},
dom: "<'row'<'col-sm-12 col-md-4'f><'col-sm-12 col-md-4'B><'col-sm-12 col-md-4'l>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
columnDefs: [
{
searchPanes: {
show: false
},
targets: [4]
}
],
ajax: {
url: "/ControllerA/FuntionC",
data: {
"someDataA": someDataA,
"someDataB": someDataB
}
},
columns: [
{ data: 'user' },
{ data: 'subproject' },
{ data: 'position' },
{ data: 'hours' },
{ data: 'totalPay' }
],
dataSrc: 'user'
}
});
table.searchPanes.container().prependTo(table.table().container());
table.searchPanes.resizePanes();
My table, from the ajax call, receives 6 columns of data: user
, subproject
, position
, hours
, totalPay
and subprojectGroup
. I choose to display the first 5 columns, however i would still like to create a search pane for the 6th column, even though i do not define it in the table display. Is it possible?
I've examined the example for adding custom search panes on the official examples, however it only uses rowData
, which i assume means data already displayed in the table. The example also only analyses creating a single option. Since the subprojectGroup
number of entries can fluctuate is there a possibility to iterate with a for loop to display all of them?
Answers
You will need to add it as a column. Use
columns.visible
to hide the column, for example:Kevin