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?

BlueHuesBlueHues Posts: 16Questions: 5Answers: 0
edited December 2022 in Free community support

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

  • kthorngrenkthorngren Posts: 21,342Questions: 26Answers: 4,954

    You will need to add it as a column. Use columns.visible to hide the column, for example:

    { data: 'subprojectGroup', visible: false }
    

    Kevin

Sign In or Register to comment.