SearchPane列显示的数据表问题

Question

我一直在尝试使用SearchPanes，并设法让它很好地工作。如果我不使用Button，则"columns-4“的列布局值将按预期工作。

我遇到的问题是，一旦我添加了按钮，SearchPane就会在“弹出窗口”中打开--它完全忽略了"columns-4“的值。

我已经在下面粘贴了我非常粗糙的代码。也许这只是我遗漏的一些东西。

任何/所有的帮助都将不胜感激。

我试图实现的是4列横跨，目前只是在“弹出”中显示3列。

$('#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']           
    });

Answer 1

在构建按钮部分时，我似乎缺少一些元素(Config/Layout)。

下面的例子给了我问题的答案。

$(document).ready( function () {
  var table = $('#example').DataTable({
    dom: 'Bfrtip',
    buttons: [
      {
        extend: 'searchPanes',
        config: {
          layout:'columns-4'
        }
      }
    ]
  });
} );