Jquery Datatable样式设置使引导按钮与其他元素显示在同一行上

我正在rails站点上使用jQueryDataTables插件和引导。我无法将自定义按钮和其他表头元素嵌套在同一行中，它们是堆叠的，而不是内联的

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

以下是我使用过的一些JavaScript：

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

---

看看DataTable的文档

在要内联显示的元素上尝试此

dom:“frtip”
放置
style=“display:inline”
。
解决方案#1
这是对jQuery数据表使用Bootstrap样式时最容易混淆的部分，到目前为止还没有文档记录。引导扩展覆盖可通过查看确认的默认值

您必须使用特制的选项，如下所示：

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>>",

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

有关代码和演示，请参见。
您必须放置两个div：一个用于datatable按钮，另一个用于自定义代码

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

在我的例子中，我刚刚添加了以下样式：

.dataTables_length,.dataTables_filter {
    margin-left: 10px;
    float: right;
}

我就是这样做的

"dom": '<"row"<"col-6"<"d-flex justify-content-start"<""l><"ml-4"i>>><"col-6"<"d-flex justify-content-end"<""f>>>>tp'

在我的例子中，我刚刚添加了这个CSS

.dataTables_wrapper .dataTables_length {
    float:left;
    position: absolute;
}
.dataTables_wrapper .dataTables_filter {
    float: right;
}

CSS
空白：nowrap？是的，即使是这个示例也会堆叠搜索栏和插入的文本。。请参见此处
.toolbar{float:left；}
添加此项。它将像一个符咒一样工作。这将不能正确地使用引导样式。此外，您还错过了
B
选项。听起来不错，但是如何将类附加到自定义按钮和Datatables插件标题中的项目？为什么不能？发布你的代码，让我明白你的意思。哇。。哇。。谢谢你的密码。。完全有道理，但你到底是怎么想出来的？？最后一个问题。。如何在同一行中添加第二个自定义按钮？@ToddT也遇到了同样的问题，通过检查扩展的源代码就解决了这个问题。jQueryDataTables是一个优秀的库，但我希望这一部分的文档记录得更好。。如何在同一行中添加第二个自定义按钮？@ToddT，我仍在学习1.10.8中的新功能，但我认为应该像中一样进行。再次。。非常感谢！我试过了，但没找到两个按钮之间的逗号。。
"dom": '<"row"<"col-6"<"d-flex justify-content-start"<""l><"ml-4"i>>><"col-6"<"d-flex justify-content-end"<""f>>>>tp'

div.dataTables_wrapper div.dataTables_info{
   padding-top: 0.2em !important; 
 }

.dataTables_wrapper .dataTables_length {
    float:left;
    position: absolute;
}
.dataTables_wrapper .dataTables_filter {
    float: right;
}