Disable SearchPanes live filtering

LadyNayZA

Hi there, I do not have a link to the testcase as it is on my dev server.
I am trying to disable the searchpanes filtering from doing a live update on the datatable as I am using serverside rendering with over 300K data records.

Everytime I clikc a filter the ajax get's called and the datatable updates - as expected. However the more data we will add this will be a clear problem.

I have an apply button on the front end and would like to utilize this to apply the filters and not have the filters doing the indexing and so forth live. Is this possible?

Here is my current code:

new DataTable('#results_table', {
                pageLength: 100,
                // deferRender: true,
                fixedHeader: true,
                lengthMenu: [ [25, 50, 100, 1000, 2000, -1], [25, 50, 100, 1000, 2000, "All"] ],
                fixedColumns: {
                    left: 4
                },
                serverSide: true,
                processing: true,
                scrollX:true,
                dom: 'PBlfrtip',
                bInfo : true,
                searching: false,
                buttons: [
                    {
                        extend: 'excel',
                        text: 'Export Filtered to Excel',
                        filename: 'filtered-data-export',
                        exportOptions: {
                            modifier: {
                                page: 'all',
                                selected: null,
                                search: 'applied',
                            }
                        },
                        action: function(e, dt, node, config) {
                            var dtButton= this; //we need this as param for action.call()
                            var currentPageLen = dt.page.len();
                            var currentPage = dt.page.info().page;

                            dt.one( 'draw', function () {
                                $.fn.DataTable.ext.buttons.excelHtml5.action.call(dtButton, e, dt, node, config); //trigger export

                                //setTimeout is needed here because action.call is async call
                                //without setTimeout, pageLength will show all
                                setTimeout(function() {
                                    dt.page.len(currentPageLen).draw(); //set page length
                                    dt.page(currentPage).draw('page'); //set current page
                                }), 500;
                            });

                            //draw all before export
                            dt.page.len(-1).draw();
                        }
                    }
                ],
                ajax: {
                    url: 'pagefeed?draw=1&start=0&length=null&order%5B0%5D%5Bcolumn%5D=2&order%5B0%5D%5Bdir%5D=asc',
                    dataSrc: function(json) {
                        //console.log(json); // Log the entire data received from the server
                        return json.data; // Return the data for DataTables to use
                    }
                },
                columns: [
                    { data: 'Rep_Name' },
                    { data: 'Client_Name' },
                    { data: 'Description_1' },
            { data: 'STK_GRP_DESCR'},
                    { data: '2022' },
                    { data: '2023' },
                    { data: '2024' },
                    { data: 'cy-py' },
                    { data: '2024-01' },
                    { data: '2024-02' },
                    { data: '2024-03' },
                    { data: '2024-04' },
                    { data: '2024-05' },
                    { data: '2024-06' },
                    { data: '2024-07' },
                    { data: '2024-08' },
                    { data: '2024-09' },
                    { data: '2024-10' },
                    { data: '2024-11' },
                    { data: '2024-12' },
                    { data: 'Main Group'}
                ],
                searchPanes: {
                    initCollapsed:false,
                    columns: [0, 1, 2, 3, 20],
                    cascadePanes: false,
                }
            });
        
            
            // Apply search
            $('#applyFilter').on('click', function() {
                table.searchPanes.rebuildPane();
                table.draw();
            });

I tried adding the Search false but to no avail. Also, is there a way to show the Showing Entries X of X via the client side or does it have to be via the server side?

LadyNayZA

<a href="//legacy.datatables.net/ref#bInfo">bInfo</a> : true,

Not sure why the code copied over with this it is: bInfo: true,

allan

bInfo is a legacy parameter name - use info instead. Same thing, different name. The forum checker / warning for it just for a bit over excited and highlighted it in the code block.

Regarding the issue at hand - are you basically looking to wait for the SearchPane applied search from selecting rows to wait until a button is pressed? That is not a feature of SearchPanes at this time I'm afraid.

Allan

LadyNayZA

Hi there thanks for the response, will also make that info adjustment, yeah looking for a "select filters first" then "press apply button" to start the filtering.