jQuery 数据表 DOM 按钮定位

Question

我刚刚将 jQuery 数据表版本升级到 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" 中是否有可用的配置？

谢谢！

Answer 1

我不是数据表库方面的专家，但是您可以使用 documentation says you can have multiple collections of buttons and insert them separately. It also has an example for multiple button groups 而不是在 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()
);

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

Answer 2

您使用 <'.class'> 或 <'#id'> 将新元素添加到数据表 dom 控件。例如，在分页左侧插入一个新的<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>"

colvis 按钮具有 class .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 按钮，这样 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;
}

使用 container 选项：

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

演示 -> http://jsfiddle.net/v4bLv83h/

如示例所示，您现在可以为每个按钮指定一个替代容器。注意 container 可以是任何元素，不一定是 dom 注入的元素。另请注意（您可能会在 fiddle 中注意到）如果您想让注入的元素与本机控制元素（例如分页块）一起正确流动，则需要进行一些样式设置。

jQuery 数据表 DOM 按钮定位

jQuery Datatable DOM positioning for Buttons

jquery

datatables

twitter-bootstrap

datatables-1.10