Question

我在我的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，可以通过查看its source code来确认。

您必须使用类似于以下所示的特制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-*类，您可以随心所欲地创作。

请参阅this jsFiddle以获取代码和演示。

解决方案＃2

您还可以使用this example中所示的直接插入方法，因为用于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)' );  
   }
});

请注意，代码与上面引用的示例不同，因为如果issue选项中没有B个字符，那么dom有DataTables 1.10.9会阻止直接插入按钮<3}}选项未指定。

请参阅dom以获取代码和演示。

Answer 2

你必须放两个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>');

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

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

Sample Image

Answer 3

就我而言，我刚刚添加了以下样式：

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

Answer 4

这就是我的方法。

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

还添加一些自定义CSS，使内容看起来更加内联。

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

Answer 5

就我而言，我只是添加了这个 CSS

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

Answer 6

查看DataTable Here的文档。

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

Answer 7

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

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

7 个答案:

解决方案＃1

解决方案＃2