用于按钮的jQuery Datatable DOM定位

"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,因此您可以通过以下方式将它们永久移动到注入的#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.另请注意(如您在小提琴中可能会注意到的)如果要使注入元素与本机控件元素(例如分页块)一起正确流动,则需要进行一些样式设置.