您可以使用以下命令将新元素添加到 dataTables dom 控件中<'.class'>
or <'#id'>
。例如,插入一个新的<div id="colvis">
分页左侧的元素,<'#colvis'>
before p
:
"sDom": "B<'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'<'#colvis'>p>"
科尔维斯按钮有类.buttons-colvis
,因此您将它们永久移动到注入的#colvis
元素由:
$('.buttons-colvis').detach().appendTo('#colvis')
这是将 Colvis 按钮移动到另一个位置的快速方法。
关于@GreeKatrina的建议,是的 - 但正确的放置方法是:
var colvis = new $.fn.dataTable.Buttons( table, {
buttons: [
{
extend: 'colvis',
...
}
]
})
colvis.container().appendTo('#colvis')
if你有一个#colvis
当然元素。
我的建议:除了上面的硬编码解决方案之外,您专门针对 colvis 按钮,您还可以猴子修补 dataTables 按钮,这样each扩展按钮可以有一个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;
}
use the container
选项 :
{
extend: 'colvis',
postfixButtons: [ 'colvisRestore' ],
container : '#colvis', //<---
columns: '0,1,2,3,4,5'
}
演示->http://jsfiddle.net/v4bLv83h/
正如示例所示,您现在可以为每个按钮指定一个替代容器。注意container
可以是任何元素,它不必是由注入的元素dom
。另请注意(正如您可能在小提琴中注意到的那样),如果您想让注入的元素与本机控制元素(例如分页块)一起正确流动,则需要进行一些样式设置。