我刚刚将我的 jQuery Datatable 版本升级到 1.10。然后我尝试删除其已退役的插件,例如带有“Button”扩展名的“Colvis”和“Tabletools”。这里一切正常。
但我的问题是,我无法将“Colvis”按钮与“Tabletool”按钮分开。
"sDom": "B<'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'p>B",
"buttons": [
'copyHtml5',
'excelHtml5',
'csvHtml5',
{
extend: 'colvis',
postfixButtons: [ 'colvisRestore' ],
columns: '0,1,2,3,4,5,6'
}
],
language: {
buttons: {
colvis: 'Change columns'
}
}
在“sDom”中,字母“B”表示按钮。所以我将所有四个按钮(复制、Excel、CSV 和 Colvis)放在一行中。但我需要将“Colvis”按钮与(复制、Excel 和 CSV)分开。
那么有什么方法可以在搜索框附近添加一个按钮,在分页附近添加另一个按钮吗?
或
“sDom”或“Button”中是否有可用的配置?
谢谢!
最佳答案
您可以使用 <'.class'>
将新元素添加到 dataTables dom 控件中或 <'#id'>
.例如,插入一个新的 <div id="colvis">
分页左侧的元素,<'#colvis'>
之前p
:
"sDom": "B<'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'<'#colvis'>p>"
colvis 按钮类有 .buttons-colvis
, 所以你将它们永久地移动到注入(inject)的 #colvis
元素:
$('.buttons-colvis').detach().appendTo('#colvis')
这是将 colvis 按钮移动到另一个位置的快速方法。
关于@GreeKatrina 的建议,是的 - 但正确的放置方法是:
var colvis = new $.fn.dataTable.Buttons( table, {
buttons: [
{
extend: 'colvis',
...
}
]
})
colvis.container().appendTo('#colvis')
如果您有一个 #colvis
当然是元素。
我的建议:
除了上面的硬编码解决方案,您可以专门针对 colvis 按钮,您可以猴子修补 dataTables 按钮,这样每个扩展按钮都可以有一个 container
。选项。初始化后,按钮移动到指定的container
:
var org_buildButton = $.fn.DataTable.Buttons.prototype._buildButton;
$.fn.DataTable.Buttons.prototype._buildButton = function(config, collectionButton) {
var button = org_buildButton.apply(this, arguments);
$(document).one('init.dt', function(e, settings, json) {
if (config.container && $(config.container).length) {
$(button.inserter[0]).detach().appendTo(config.container)
}
})
return button;
}
使用container
选项:
{
extend: 'colvis',
postfixButtons: [ 'colvisRestore' ],
container : '#colvis', //<---
columns: '0,1,2,3,4,5'
}
演示 -> http://jsfiddle.net/v4bLv83h/
如示例所示,您现在可以为每个按钮指定一个替代容器。注意 container
可以是任何元素,它不一定是 dom
注入(inject)的元素.另请注意(您可能会在 fiddle 中注意到)如果您想让注入(inject)的元素与 native 控制元素(例如分页 block )一起正确流动,则需要进行一些样式设置。
关于按钮的 jQuery Datatable DOM 定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34416766/