SearchPanes - Button - Column Layout

SQLGuru

I have been playing around with the SearchPanes and managed to get it working quite nicely. If I do not use the Button, then the column layout value of "columns-4" works as intended.

The issue I am having is that once I add the button and the SearchPane opens in a "popup window" - it ignores the "columns-4" value altogether.

I have pasted my very rough code below. Perhaps it is just something that I am missing.

Any/all help would be greatly appreciated.

What I am trying to achieve is 4 columns across, currently it is just displaying 3 columns.

$('#style-2').DataTable({
             "dom":  "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'Bf>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>" +                     
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            "oLanguage": {
                "oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
                "sInfo": "Showing page _PAGE_ of _PAGES_",
                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                "sSearchPlaceholder": "Search...",
               "sLengthMenu": "Results :  _MENU_",
            },
            "stripeClasses": [],
            "lengthMenu": [10, 20, 30],
            "pageLength": 10,
            stateSave: false,
            //stateSaveCallback: function(settings,data) {
            //    localStorage.setItem('DataTables_' + window.location.pathname, JSON.stringify(data) )
            //},
            //stateLoadCallback: function(settings) {
            //return JSON.parse( localStorage.getItem('DataTables_' + window.location.pathname ) )
            //},
            //stateDuration: 60 * 60 * 168,
            searchPanes: {
                layout: 'columns-4'//,
                //columns: [ 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 ]
            },
            columnDefs: [
            {
                searchPanes: { show: true, },
                targets: [ 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 ],
            },
            {
                searchPanes: { show: false, },
                targets: [ 0, 1, 2, 3, 4, 21 ],
            },
                { visible: false, targets: [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] },
                { orderable: true, targets: [0, 1, 2, 3, 4] },
                { type: 'alt-string', targets: [2] },
                { orderable: false, targets: '_all' }
            ],
            buttons: ['searchPanes']            
        });

colin

It works OK here in this example. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

SQLGuru

Your example hit the nail directly on the head! I was missing the config and layout elements.

Thank so much!!