jQuery 数据表样式，因此引导按钮与其他元素显示在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32252616/
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
Datatable styling so bootstrap button appears on same row as other elements
提问by ToddT
I'm using jQuery DataTables plugin and Bootstrap on my rails site. I can't get my custom button and other table header elements to nest in the same row, They are stacked instead of being inline.
我在我的 rails 站点上使用 jQuery DataTables 插件和 Bootstrap。我无法让我的自定义按钮和其他表格标题元素嵌套在同一行中，它们是堆叠的而不是内联的。
Any suggestions to get them all on the same line?
有什么建议可以让他们都在同一条线上？
Here is some of the JavaScript I've used:
以下是我使用过的一些 JavaScript：
$(document).ready(function() {
$('#products').DataTable( {
dom: 'Blfrtip',
buttons: [ {
text: 'Pull my products',
action: function ( e, dt, node, config ) {
alert( 'Button activated' );
}
}]
});
});
回答by Gyrocode.com
SOLUTION #1
解决方案#1
This is the most confusing part with using Bootstrap style for jQuery DataTables and it's undocumented so far. Bootstrap extension overrides default domwhich can be confirmed by viewing its source code.
这是对 jQuery DataTables 使用 Bootstrap 样式最令人困惑的部分，到目前为止它没有记录。Bootstrap 扩展覆盖默认值dom，可以通过查看其源代码来确认。
You have to use specially crafted domoption similar to shown below:
您必须使用dom类似于下图所示的特制选项：
dom:
"<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
You can be as creative as you want by using Bootstrap rowand col-*classes in the domoption.
通过在选项中使用 Bootstraprow和col-*类，您可以随心所欲地发挥创意dom。
See this jsFiddlefor code and demonstration.
有关代码和演示，请参阅此 jsFiddle。
SOLUTION #2
解决方案#2
You can also use direct insertion method as shown in this examplebecause default domoption used for Bootstrap styling is quite complex.
您还可以使用本示例中所示的直接插入方法，因为dom用于 Bootstrap 样式的默认选项非常复杂。
var table = $('#example').DataTable({
initComplete: function(){
var api = this.api();
new $.fn.dataTable.Buttons(api, {
buttons: [
{
text: 'Pull my products',
action: function ( e, dt, node, config ) {
alert( 'Button activated' );
}
}
]
});
api.buttons().container().appendTo( '#' + api.table().container().id + ' .col-sm-6:eq(0)' );
}
});
Note that code differs from the example referenced above because there is an issuewith DataTables 1.10.9 preventing direct insertion of buttons if there is no Bcharacter in domoption or domoption is not specified.
请注意，代码与上面引用的示例不同，因为如果选项中没有字符或未指定选项，则DataTables 1.10.9 存在阻止直接插入按钮的问题。Bdomdom
See this jsFiddlefor code and demonstration.
有关代码和演示，请参阅此 jsFiddle。
回答by Dima L.
In my case I just added these styles:
就我而言，我只是添加了这些样式：
.dataTables_length,.dataTables_filter {
margin-left: 10px;
float: right;
}
回答by Felix Bagur
You have to put two divs: one for the datatable buttons and other for your custom code
您必须放置两个 div：一个用于数据表按钮，另一个用于自定义代码
var table = $("#tbl_oferta").dataTable({
dom: '<"pime-grid-button"B><"pime-grid-filter">frtip',
...
});
$("div.pime-grid-filter").html('<b>Custom tool bar! Text/images etc.</b>');
Then define div class in your css:
然后在你的 css 中定义 div 类：
.pime-grid-button{float:left}
.pime-grid-filter{float:left;margin-left:10px}
回答by Asad Ali
回答by raduation
Put style="display: inline"on the elements you want to display inline.
放置style="display: inline"要内联显示的元素。
