数据表样式，因此 bootstrap 按钮与其他元素出现在同一行

Question

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

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

这是我用过的一些 JavaScript：

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

Answer 1

查看 DataTable 的文档 Here。

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

Answer 2

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

Answer 3

解决方案 #1

这是对 jQuery 数据表使用 Bootstrap 样式最令人困惑的部分，到目前为止还没有记录。 Bootstrap 扩展覆盖默认值 dom which can be confirmed by viewing 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

您也可以使用直接插入方法，如此示例所示，因为用于 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)' );  
   }
});

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

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

Answer 4

您必须放置两个 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 class:

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

Sample Image

Answer 5

就我而言，我只是添加了这些样式：

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

Answer 6

我就是这样做的。

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

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

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

Answer 8

您可以在工具栏菜单中添加按钮，如下所示：

        initComplete: function(){
            $("div.toolbar").html('<input type="button");          
        }

然后将此工具栏添加到 Datatables 的 DOM 元素，如下所示：

    dom: "<'row'<'col-sm-2'l><'toolbar'><'col-sm-8'f>>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'row'<'col-sm-5'i><'col-sm-7'p>>",

可以使用 css 对齐此工具栏，如下所示： .工具栏{ 向左飘浮; margin-left: 60px; }

数据表样式，因此 bootstrap 按钮与其他元素出现在同一行

Datatable styling so bootstrap button appears on same row as other elements

jquery

datatables

twitter-bootstrap

datatables-1.10

解决方案 #1

解决方案#2