按钮的 jQuery Datatable DOM 定位

Question

我刚刚升级我的jQuery的数据表版本1.10。然后我试图删除其退休的插件，如“Colvis”和“Tabletools”与“按钮”扩展名。一切工作正常这里。

但对我的问题是，我能不能从“Tabletool”按钮分开“Colvis”按钮。

"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）来分离。 P>

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

或

是否有任何可用的构型在“sDom”或“按钮”？ P>

谢谢！

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

Answer 2

我不是数据表库方面的专家，但documentation 表示您可以拥有多个按钮集合并分别插入它们。它还有一个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()
); 

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