Question

我刚刚将jQuery Datatable版本升级到1.10。然后我试图删除它退役的插件，例如＆＃34; Colvis＆＃34;和＆＃34; Tabletools＆＃34;使用＆＃34;按钮＆＃34;延期。这里一切都很好。

但对我来说问题是，我无法分开＆＃34; Colvis＆＃34;来自＆＃34; Tabletool＆＃34;的按钮纽扣。

"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'
        }
    }

＆＃34; sDom＆＃34;中的字母＆＃34; B＆＃34;表示按钮。所以我将所有四个按钮（复制，Excel，CSV和Colvis）放在一行中。但我需要＆＃34; Colvis＆＃34;按钮要与（复制，Excel和CSV）分开。

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

OR

＆＃34; sDom＆＃34>是否有任何可用的配置？或者在＆＃34;按钮＆＃34;？

谢谢！

Answer 1

您可以使用<'.class'>或<'#id'>向dataTables dom控件添加新元素。例如，在<div id="colvis">之前在{1}}之前的分页左侧插入新的<'#colvis'>元素：

colvis按钮具有类"sDom": "B<'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'<'#colvis'>p>"，因此您可以将它们永久移动到注入的.buttons-colvis元素：

#colvis

这是将colvis按钮移动到另一个位置的快捷方式。

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

$('.buttons-colvis').detach().appendTo('#colvis')

如果您当然有var colvis = new $.fn.dataTable.Buttons( table, { buttons: [ { extend: 'colvis', ... } ] }) colvis.container().appendTo('#colvis')个元素。

我的建议： 除了以上硬编码的解决方案，你专门针对colvis按钮，你可以使用补丁dataTables按钮，所以每个扩展按钮可以有一个#colvis选项。初始化后，按钮将移至指定的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

演示 - ＆gt;的 http://jsfiddle.net/v4bLv83h/

如示例所示，您现在可以为每个按钮指定备用容器。请注意，{ extend: 'colvis', postfixButtons: [ 'colvisRestore' ], container : '#colvis', //<--- columns: '0,1,2,3,4,5' }可以是任何元素，它不必是container注入的元素。另请注意（如您在小提琴中可能会注意到的）如果要使注入元素与本机控件元素（例如分页块）一起正确流动，则需要进行一些样式设置。

Answer 2

我不是数据表库的专家，但Visitor Pattern Java 8 Lambda implementation表示您可以拥有多个按钮集合并单独插入。它还有documentation的示例，您可以使用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()
);

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

用于按钮的jQuery Datatable DOM定位

2 个答案: