jQuery Datatable中的DOM定位问题：如何为按钮设置位置

Question

我刚刚将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"中是否有可用的配置？

谢谢！

- Raja

Answer 1

您可以使用<'.class'>或<'#id'>向dataTables dom控件添加新元素。例如，在分页的左侧插入一个新的<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，因此您可以通过以下方式将其永久移动到注入的#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 注入的元素。同时请注意（正如您在 fiddle 中可能会注意到的那样），如果您想使注入的元素与本地控制元素（例如分页块）正确流动，您需要进行一些样式设置。

- davidkonrad

---

这正是我一直在寻找的完美解决方案，非常好用，非常感谢你。 - user3393929

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()
); 

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

- Katrina

---

你好，感谢您的回复。但是它会抛出一个错误，类似于“未捕获的类型错误：无法读取未定义的属性'inst'”，来自Datatable JS文件。 - Raja

多个B是完全合法的。dataTables只是为每个B插入一个“克隆”的按钮区域。是的，声明多个按钮对象可能是一种解决方法，这相当于将按钮移动到更复杂的版本。然而，它应该是<buttonObject>.container().appendTo(<element>)，而 table.table().container()只是表格包装器本身。 - davidkonrad

@Yadheendran 我猜测你之所以会出现那个错误，是因为你没有正确加载库。$.fn.dataTable 可能未定义并抛出了该错误。我需要看一下你如何加载脚本才能确定。请参见此问题和两个答案。 - Katrina