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

我在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' );
      }
    }]
  });
});

解决方案＃1

这是将Bootstrap样式用于jQuery DataTables时最令人困惑的部分，到目前为止，该文件尚未记录。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>>",

通过使用选项中的Bootstraprow和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在domoption中没有字符或未dom指定option时，则无法直接插入按钮。

有关代码和演示，请参见此jsFiddle。

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

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

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

样本图片

这就是我的方法。

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

在此处查看DataTable的文档。

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

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

本文地址：http://jquery.askforanswer.com/shujubiaoyangshiyinciyindaoanniuyuqitayuansuxianshizaitongyixing.html
文章标签：datatables , datatables-1.10 , jquery , twitter-bootstrap
版权声明：本文为原创文章，版权归 admin 所有，欢迎分享本文，转载请保留出处！

解决方案＃1

解决方案＃2

文件下载