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

2021/01/01 16:11 · jquery ·  · 0评论

我在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>>",

通过使用选项中的Bootstraprowcol-*类,您可以根据需要发挥创造力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存在问题,如果Bdomoption中没有字符或未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
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!