web-dev-qa-db-ja.com

データテーブルのスタイル設定なので、bootstrapボタンは他の要素と同じ行に表示されます

JQuery DataTablesプラグインを使用していて、BootstrapでRailsサイト。カスタムボタンと他のテーブルヘッダー要素を同じ場所にネストすることはできません。行、インラインではなくスタックされます。

それらをすべて同じ行に入れるための提案はありますか？

私が使用したJavaScriptの一部を次に示します。

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

ソリューション＃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 オプションで使用することにより、好きなだけクリエイティブにすることができます。

コードとデモについては、 this 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)' );  
   }
});

B オプションにdom文字がない場合、DataTables 1.10.9で issue があり、ボタンの直接挿入ができないため、コードは上記の例とは異なることに注意してください。 dom オプションが指定されていません。

コードとデモについては、 this jsFiddle を参照してください。

50
Gyrocode.com

データテーブルボタン用とカスタムコード用の2つの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}

サンプル画像

1
Felix Bagur

私の場合、これらのスタイルを追加しました。

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