Trying to use finite, initial set of search options with server side processing

jaycee21

I have a data set of almost 1M records and several options I need to preconfigure the datatable to provide as options to filter the results by while using server-side processing for everything. The options are finite and known before the datatable is initialized, so I'd prefer a way to just feed datatable the arrays of possible options each SearchPane or SearchBuilder field. For instance, some of the options would be Status (~8 possible values), Type (~120 possible values), etc. Is this possible?

Here is the code I've been testing - with a focus on SearchPanes integration first since I feel its UX is more suitable for the intended user base. I have left in some of the commented out code that I've been trying.

        var table = $('#tableContentSearch').DataTable({
            "dom" : 'B<"searchTop"if>rt<"searchBottom"ip>', /* hides per-page selector */
            "ajax" : {
                url : '/v3/search/content-results',
            },
            "processing": true,
            search: {
                return: true /* require the user press Enter key to trigger search */
            },
            "serverSide": true,
            "order" : [[4, "desc"]], /* set default sort to Last Update time */
            language : {
                searchPanes : {
                    clearMessage : 'Clear Selections',
                    collapse: {0: 'Search Options', _: 'Search Options (%d)'}
                }
            },
            "buttons" : [
                {
                    extend : 'searchPanes',
                    config : {
                        viewCount: false,
                        columns: [1],
                        /*serverSide: true,*/
                        /*orderable : false,
                        viewCount : false,
                        layout: 'columns-4',
                        dtOpts: {
                            dom : 'ti'
                        },*/
                        panes : [
                            {
                                header : 'Types',
                                options : [
                                    {
                                        label : 'Article',
                                        value : function(rowData, rowIdx) {
                                            return rowData[1] === 'Article';
                                        }
                                    }
                                ]
                            },
                            /*{
                                header : 'Authors',
                                options : authors,
                            },
                            {
                                header : 'Affinities',
                                options : affinities,
                            }*/
                        ]
                    }
                }
            ],
            /*columnDefs : [{
                searchPanes : {
                    show: true,
                    viewCount: false,
                    options: [
                        {
                            label : 'Article',
                            value : function (rowData, rowIdx) {
                                return rowData[1] == 'Article';
                            }
                        }
                    ]
                },
                targets: [1]
            },*/
            columnDefs: [{
                searchPanes : {
                    show: false
                },
                targets: ['_all']
            }],
            "fixedHeader" : {
                header : true,
                headerOffset : $('.navbar.fixed-top').height()
            },
            "columns": [
                {
                    "data": 'title',
                    render: function (data, type, row, meta) {
                        if (type === 'sort' || type === 'type') {
                            return row.title;
                        }
                        return '<a style="font-weight: 700;" target="_blank" href="' + row.url + '">' + row.title + '</a>';
                    }
                },
                {
                    data: 'type'
                },
                {
                    data: 'status',
                    render: function (data, type, row, meta) {
                        if (type === 'sort' || type === 'type') {
                            return data;
                        }
                        let d = data.toUpperCase();
                        let c = 'bg-info';
                        if (d == 'PUBLISHED' || d == 'REPUBLISHED') {
                            c = 'bg-success';
                        }
                        else if (d == 'RESERVED' || d == 'CREATED') {
                            c = 'bg-secondary';
                        }
                        else if (d == 'MODIFIED') {
                            c = 'bg-warning text-dark';
                        }
                        return '<span class="badge rounded-pill ' + c + '">' + data + '</span>';
                    }
                },
                { data: 'totalPages' },
                {
                    data: 'lastUpdate',
                    render: formatDate
                },
                {
                    data: 'publishDate',
                    render: formatDate
                },
                {
                    data: 'author',
                    visible: false
                },
                {
                    data: 'affinity',
                    visible: false
                },
                {
                    data: 'taxonomy',
                    visible: false,
                }
            ],
            "lengthMenu" : [50, 100, 150, 200],
        });

When I try using the custom-only panes approach, I get the error below when trying to submit a search:

jquery.dataTables.js:8775 Uncaught TypeError: Cannot read properties of undefined (reading 'mData')
    at _Api.<anonymous> (jquery.dataTables.js:8775)
    at _Api.iterator (jquery.dataTables.js:7175)
    at _Api.<anonymous> (jquery.dataTables.js:8774)
    at _Api.<anonymous> (jquery.dataTables.js:7433)
    at _Api.dataSrc (jquery.dataTables.js:7312)
    at HTMLTableElement.<anonymous> (dataTables.searchPanes.js:2755)
    at HTMLTableElement.dispatch (jquery-3.5.1.min.js:2)
    at HTMLTableElement.v.handle (jquery-3.5.1.min.js:2)
    at Object.trigger (jquery-3.5.1.min.js:2)
    at HTMLTableElement.<anonymous> (jquery-3.5.1.min.js:2)

Thanks so much for any help you can provide!

allan

columns.searchPanes.options is what you would use to define options. If that doesn't work for you, can you link to a test case showing the issue please?

Thanks,
Allan