我一直在玩搜索窗格，并设法让它很好地工作。如果我不使用按钮，则"列-4"的列布局值将按预期工作。
我遇到的问题是，一旦我添加按钮并且 SearchPane 在"弹出窗口"中打开 - 它就会完全忽略"列-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']
});
在构建按钮部分时，我似乎缺少一些元素(配置/布局(。
下面的例子给了我问题的答案。
$(document).ready( function () {
var table = $('#example').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'searchPanes',
config: {
layout:'columns-4'
}
}
]
});
} );