twitter-bootstrap 按钮的 jQuery Datatable DOM 定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34416766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Datatable DOM positioning for Buttons
提问by Raja
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.
我刚刚将我的 jQuery Datatable 版本升级到 1.10。然后我尝试删除其已停用的插件，例如带有“Button”扩展名的“Colvis”和“Tabletools”。这里一切正常。
But the problem for me is, I could not able to separate "Colvis" button from the "Tabletool" buttons.
但对我来说问题是，我无法将“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'
}
}
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).
在“sDom”中，字母“B”表示按钮。所以我在一行中获得了所有四个按钮（复制、Excel、CSV 和 Colvis）。但我需要将“Colvis”按钮与（复制、Excel 和 CSV）分开。
So Is there any way to add one button near to search box and another one near to the pagination?
那么有什么方法可以在搜索框附近添加一个按钮，在分页附近添加另一个按钮吗？
OR
或者
Is there any configuration available in the "sDom" or in the "Button"?
“sDom”或“Button”中是否有可用的配置？
Thank you!
谢谢！
回答by davidkonrad
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:
您可以使用<'.class'>或向 dataTables dom 控件添加新元素<'#id'>。例如，<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 has the class .buttons-colvis, so you move them permanently to the injected #colviselement by :
colvis 按钮具有 class .buttons-colvis，因此您可以通过以下方式将它们永久移动到注入的#colvis元素：
$('.buttons-colvis').detach().appendTo('#colvis')
This is the fast way to move the colvis button to another location.
这是将 colvis 按钮移动到另一个位置的快速方法。
Regarding @GreeKatrina's suggestion, yes - but the correct placement method is :
关于@GreeKatrina 的建议，是的 - 但正确的放置方法是：
var colvis = new $.fn.dataTable.Buttons( table, {
buttons: [
{
extend: 'colvis',
...
}
]
})
colvis.container().appendTo('#colvis')
ifyou have a #colviselement of course.
#colvis当然，如果你有一个元素。
My recommendation :Besides the above hardcoded solution, where you target the colvis buttons specifically, you could monkey patch dataTables buttons so eachextended button can have a containeroption. After initialisation, the button is moved to the specified container:
我的建议：除了上面的硬编码解决方案，你可以专门针对 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;
}
use the containeroption :
使用container选项：
{
extend: 'colvis',
postfixButtons: [ 'colvisRestore' ],
container : '#colvis', //<---
columns: '0,1,2,3,4,5'
}
demo -> http://jsfiddle.net/v4bLv83h/
演示 -> http://jsfiddle.net/v4bLv83h/
As the example demonstrates, you can now specify an alternative container for each and every button. Note that containercan 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.
如示例所示，您现在可以为每个按钮指定一个替代容器。请注意，container可以是任何元素，它不必是由 注入的元素dom。另请注意（正如您在小提琴中可能注意到的那样），如果您想让注入的元素与本机控制元素（例如分页块）一起正确流动，则需要进行一些样式设置。
回答by GreeKatrina
I'm not an expert with the data tables library, but the documentationsays you can have multiple collections of buttons and insert them separately. It also has an example for multiple button groupsthat you could use instead of putting "B" multiple times in the domoption, which I don't think is valid.
我不是数据表库的专家，但文档说您可以拥有多个按钮集合并分别插入它们。它还具有多个按钮组的示例，您可以使用它来代替在dom选项中多次放置“B” ，我认为这是无效的。
Combining the examples from the documentation and your example (not tested):
结合文档中的示例和您的示例（未测试）：
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()
);
If it doesn't work let me know and I'll update my answer.
如果它不起作用，请告诉我，我会更新我的答案。
