数据表样式，因此引导按钮与其他元素显示在同一行 [英] Datatable styling so bootstrap button appears on same row as other elements

问题描述

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

I'm using jQuery DataTables plugin and Bootstrap on my rails site. I can't get my custom button and other table header elements to nest in the same row, They are stacked instead of being inline.

有什么建议可以让他们都在同一行吗?

Any suggestions to get them all on the same line?

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

Here is some of the JavaScript I've used:

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

推荐答案

SOLUTION #1

这是在 jQuery DataTables 中使用 Bootstrap 样式时最令人困惑的部分，目前还没有记录.Bootstrap 扩展覆盖默认的 dom 可以通过查看 其源代码.

您必须使用特制的 dom 选项类似于所示下面:

You have to use specially crafted dom option similar to shown below:

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 选项.

You can be as creative as you want by using Bootstrap row and col-* classes in the dom option.

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

See this jsFiddle for code and demonstration.

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

You can also use direct insertion method as shown in this example because default dom option used for Bootstrap styling is quite complex.

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 选项是未指定.

Note that code differs from the example referenced above because there is an issue with DataTables 1.10.9 preventing direct insertion of buttons if there is no B character in dom option or dom option is not specified.

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

See this jsFiddle for code and demonstration.

这篇关于数据表样式，因此引导按钮与其他元素显示在同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！