数据表样式，因此引导按钮与其他元素显示在同一行上

我在我的rails网站上使用jQuery DataTables插件和Bootstrap。 我无法将自定义按钮和其他表格标题元素嵌套在同一行中，它们是堆叠的而不是内联的。

有什么建议让他们都在同一条线上吗？

以下是我使用的一些JavaScript：

$(document).ready(function() { $('#products').DataTable( { dom: 'Blfrtip', buttons: [ { text: 'Pull my products', action: function ( e, dt, node, config ) { alert( 'Button activated' ); } }] }); }); 

Answer 1

解决方案＃1

对于jQuery DataTables使用Bootstrap样式来说，这是最令人困惑的部分，到目前为止它还没有记录。 Bootstrap扩展覆盖默认dom ，可以通过查看其源代码来确认。

你必须使用类似如下所示的特制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>>", 

通过在dom选项中使用Bootstrap row和col-*类，您可以随心所欲地创建。

有关代码和演示，请参阅此jsFiddle 。

解决方案＃2

您也可以使用此示例中所示的直接插入方法，因为用于Bootstrap样式的默认dom选项非常复杂。

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

请注意，代码与上面引用的示例不同，因为如果dom选项中没有B字符或未指定dom选项，则DataTables 1.10.9存在阻止直接插入按钮的问题 。

有关代码和演示，请参阅此jsFiddle 。

Answer 2

你必须放两个div：一个用于数据表按钮，另一个用于自定义代码

  var table = $("#tbl_oferta").dataTable({ dom: '<"pime-grid-button"B><"pime-grid-filter">frtip', ... }); $("div.pime-grid-filter").html('Custom tool bar! Text/images etc.'); 

然后在你的css中定义div类：

 .pime-grid-button{float:left} .pime-grid-filter{float:left;margin-left:10px} 

示例图像

Answer 3

看看DataTable的文档。

试试这个dom: '<"toolbar">frtip'

Answer 4

在要内联显示的元素上放置style="display: inline" 。