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

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,可以通过查看源代码来确认.

您必须使用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>>",

您可以通过在选项中使用Bootstrap row和col-*类来实现创意dom.

有关代码和演示,请参阅此jsFiddle.

解决方案#2

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

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

有关代码和演示,请参阅此jsFiddle.

Answer 2

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

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