用于按钮的jQuery Datatable DOM定位

我刚刚将jQuery Datatable版本升级到1.10。 然后我试图用“Button”扩展删除它的退役插件，如“Colvis”和“Tabletools”。 这里一切都很好。

但问题是，我无法将“Colvis”按钮与“Tabletool”按钮分开。

"sDom": "B<'row'r>t<'row'>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”按钮与（Copy，Excel和CSV）分开。

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

要么

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

谢谢！

Answer 1

您可以使用<'.class'>或<'#id'>将新元素添加到dataTables dom控件。 例如，在p ：之前插入一个新的

元素， <'#colvis'>

 "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注入的元素。 另请注意（如您在小提琴中可能会注意到的）如果要使注入元素与本机控件元素（例如分页块）一起正确流动，则需要进行一些样式设置。

Answer 2

我不是数据表库的专家，但是文档说你可以有多个按钮集合并单独插入它们。 它还有一个可以使用多个按钮组的示例，而不是在dom选项中多次放置“B”，我认为这不是有效的。

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

 var table = $('#myTable').DataTable( { dom: "B<'#colvis row'><'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'p>", buttons: [ 'copyHtml5', 'excelHtml5', 'csvHtml5' ] } ); new $.fn.dataTable.Buttons( table, { buttons: [ { extend: 'colvis', // Shorter than using the language.buttons.colvis option text: 'Change columns', postfixButtons: [ 'colvisRestore' ], columns: '0,1,2,3,4,5,6' } ] } ); // To append it at the bottom of the table // 3 since the colvis button is at the 3rd index in the buttons array table.buttons( 3, null ).container().appendTo( table.table().container() ); // To append it on the first row after the buttons, in the #colvis row table.buttons( 3, null ).container().appendTo( $('#colvis'), table.table().container() ); 

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