按钮的jQuery数据表DOM定位

我刚刚将jQuery Datatable版本升级到1.10。然后我尝试删除它的退役插件，比如“Colvis”和带有“Button”扩展名的“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”：“BtB”，
“按钮”：[
“复制HTML5”，
“卓越HTML5”，
“csvHtml5”，
{
扩展：“colvis”，
postfixButtons:['colvisRestore']，
列：“0,1,2,3,4,5,6”
}
],
语言：{
按钮：{
科尔维斯：“换栏目”
}
}

在“sDom”中，字母“B”表示按钮。因此，我将所有四个按钮（复制、Excel、CSV和Colvis）放在一行中。但是我需要将“Colvis”按钮与（复制、Excel和CSV）分开

那么，有没有办法在搜索框附近添加一个按钮，在分页附近添加另一个按钮

或

“sDom”或“按钮”中是否有可用的配置

---

谢谢大家!

我不是数据表库的专家，但管理员说您可以拥有多个按钮集合并分别插入它们。它还有一个例子，您可以使用它来代替在

dom

选项中多次放置“B”，我认为这是无效的

结合文档中的示例和您的示例（未测试）：

var table=$（'#myTable'）。数据表（{
dom:“Bt”，
按钮：[
“复制HTML5”，
“卓越HTML5”，
“csvHtml5”
]
} );
新的$.fn.dataTable.Buttons（表{
按钮：[
{
扩展：“colvis”，
//比使用language.buttons.colvis选项短
文本：“更改列”，
postfixButtons:['colvisRestore']，
列：“0,1,2,3,4,5,6”
}
]
} );
//将其追加到表的底部
//3因为colvis按钮位于按钮数组的第三个索引处
table.buttons（3，null）.container（）.appendTo(
table.table（）.container（）
);
//将其附加到按钮后的第一行，即#colvis行
table.buttons（3，null）.container（）.appendTo(
$（'#colvis'），table.table（）.container（）
); 

---

如果不起作用，请告诉我，我会更新我的答案。

您可以使用

或

向dataTables dom控件添加新元素。例如，在分页左侧插入一个新的

元素，在

p

之前插入

：

"sDom": "B<'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'<'#colvis'>p>"

这是将colvis按钮移动到其他位置的快速方法

---

关于@GreeKatrina的建议，是的-但正确的安置方法是：

var colvis = new $.fn.dataTable.Buttons( table, {
    buttons: [
        {
            extend: 'colvis',
            ... 
        }
   ]
})
colvis.container().appendTo('#colvis')

当然，如果你有一个

#colvis

元素

---

我的推荐： 除了上面的硬编码解决方案（您专门针对colvis按钮）之外，还可以使用monkey patch dataTables按钮，这样每个扩展按钮都可以有一个

容器

选项。初始化后，按钮移动到指定的

容器中

：

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;
}

使用

容器

选项：

{
   extend: 'colvis',
   postfixButtons: [ 'colvisRestore' ],
   container : '#colvis', //<---
   columns: '0,1,2,3,4,5'
}

{
扩展：“colvis”，
postfixButtons:['colvisRestore']，
容器：'#colvis'，//

如示例所示，您现在可以为每个按钮指定一个替代容器。请注意，
container
可以是任何元素，而不必是由
dom
注入的元素。另请注意（您可能在小提琴中注意到）如果要使注入的元素与本机控件元素（如分页块）一起正常流动，则需要进行一些样式设置。
您好，谢谢您的回复。但它会引发类似“Uncaught TypeError:无法读取未定义的属性'inst'的错误”从Datatable JS文件中。multilple
B
是完全合法的。dataTables只是为每个
B
插入一个“克隆”按钮部分。是的，声明多个按钮对象可能是一种解决方法，是仅移动按钮的更复杂版本。但是，它应该是
.container（）.appendTo（）
和
table.table（）.container（）
只是表包装器本身。@Yadheendran我猜您会遇到这个错误，因为您没有正确加载库。
$.fn.dataTable
可能未定义并引发了这个错误。我必须看看您是如何加载脚本的。请看和这两个答案。这正是我所寻找的解决方案，非常好，非常感谢。
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;
}

{
   extend: 'colvis',
   postfixButtons: [ 'colvisRestore' ],
   container : '#colvis', //<---
   columns: '0,1,2,3,4,5'
}