用于按钮的jQuery Datatable DOM定位 [英] jQuery Datatable DOM positioning for Buttons

问题描述

我刚刚将我的jQuery Datatable版本升级到1.10。然后我尝试删除其退出的插件，如Colvis和Tabletools与按钮扩展名。一切都很好。

I just upgraded my jQuery Datatable version to 1.10. And then i tried to remove its retired plugin such as "Colvis" and "Tabletools" with the "Button" extension. Everything works fine here.

但是我的问题是，我无法从Tabletool按钮中分离Colvis按钮。

But the problem for me is, I could not able to separate "Colvis" button from the "Tabletool" buttons.

"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）分开。

Where in the "sDom", the letter "B" denotes for Buttons. So i am getting all four Buttons (Copy, Excel, CSV and Colvis) in a single row. But i need the "Colvis" button to be separated from (Copy, Excel and CSV).

所以有什么办法可以在搜索框附近添加一个按钮一个接近分页？

So Is there any way to add one button near to search box and another one near to the pagination?

或

sDom或按钮？

谢谢！

推荐答案

通过使用&。'。class'> 或<'＃id'> 。例如，在分页左侧插入一个新的< div id =colvis> 元素，<'＃colvis'> 在 p 之前：

You add new elements to the dataTables dom controls by using <'.class'> or <'#id'>. Example, insert a new <div id="colvis"> element to the left of the pagination, <'#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按钮有类 .buttons-colvis ，所以你将它们永久移动到注入的 #colvis 元素中：

colvis buttons has the class .buttons-colvis, so you move them permanently to the injected #colvis element by :

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

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

This is the fast way to move the colvis button to another location.

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

Regarding @GreeKatrina's suggestion, yes - but the correct placement method is :

var colvis = new $.fn.dataTable.Buttons( table, {
    buttons: [
        {
            extend: 'colvis',
            ... 
        }
   ]
})
colvis.container().appendTo('#colvis')

如果你有一个 #colvis 元素当然。

if you have a #colvis element of course.

我的建议：
除了上述硬编码解决方案，你可以通过猴子补丁数据表按钮让每个扩展按钮都有一个容器选项。初始化后，按钮将移动到指定的容器：

My recommendation : Besides the above hardcoded solution, where you target the colvis buttons specifically, you could monkey patch dataTables buttons so each extended button can have a container option. After initialisation, the button is moved to the specified 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;
}

使用容器选项：

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

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

demo -> http://jsfiddle.net/v4bLv83h/

如示例所示，您现在可以为每个按钮指定一个替代容器。请注意， container 可以是任何元素，它不必是由 dom 注入的元素。还要注意（如您在小提琴中注意到的那样），如果要使注入元素与原始控件元素（如分页块）一起正常流动，则需要执行一些样式。

As the example demonstrates, you can now specify an alternative container for each and every button. Note that container can be any element, it does not have to be an element injected by dom. Also note (as you may notice in the fiddle) that you need to do some styling if you want to make injected elements flow properly along with the native control elements, such as the pagination block.

这篇关于用于按钮的jQuery Datatable DOM定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！