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

问题描述

我刚刚将我的 jQuery Datatable 版本升级到 1.10.然后我尝试删除其已停用的插件，例如带有Button"扩展名的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.

但对我来说问题是，我无法将Colvis"按钮与Tabletool"按钮分开.

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"或Button"中是否有可用的配置?

Is there any configuration available in the "sDom" or in the "Button"?

谢谢！

推荐答案

您可以使用 <'.class'> 或 <' 向 dataTables dom 控件添加新元素#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')

if 你当然有一个 #colvis 元素.

if you have a #colvis element of course.

我的建议:除了上面的硬编码解决方案(您专门针对 colvis 按钮)之外，您还可以修改 dataTables 按钮，以便 每个 扩展按钮可以有一个 container 选项.初始化后，按钮移动到指定的container :

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;
}

使用 container 选项:

{
   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屋！