2015-12-21 4 views
5

エクスポート・ボタンを表示した後、1ページあたりのレコードのドロップダウンを表示できません。 両方を自分のテーブルに表示したい。ここに私のコードです:私はテーブルの上のボタンを削除した場合にダウン表示されるページのドロップあたり1レコード・ページあたりのレコードをデータ・セットのエクスポート・ボタンとともに表示します

$(document).ready(function() { 
    $('#dataTables-example').DataTable({ 
     pageLength: 5, 
     dom: 'Bfrtip', 
     buttons: ['csv', 'excel', 'pdf', 'print'], 
     responsive: true 
    }); 
    $('.datetext').datepicker({ 
     format: "yyyy-mm-dd" 
    }); 
}); 

記録は、しかし、私はそれらの両方を表示したいです。両方を表示するには?

答えて

6

このレイアウトは、ここで行われます。

dom: 'Bfrtip', 

をですから、このためのいくつかのオプションを持っている、と私はあなたが何をしたいか知っているが、これを試してみません:この意志を

dom: 'flit', 

左側のセレクタを表示します。 追加するボタンは通常右に追加されるため、これを左に設定する必要があります。

+1

は、私は両方の私はフリットを使用する場合、エクスポートボタンが – rbstack

+3

てみ表示されていない、のDataTableの上に(セレクタは輸出入のボタンをドロップダウン)を表示します。申し訳ありませんが、私はそれをテストすることはできません。私は家にいません。私はラップトップに乗っていて、DataTableは持っていません。 – Franco

+0

ありがとう@フランコは私のために働いています。 –

4

私が間違っていない場合は、ページ長とエクスポートボタンを一緒に見ることができます。 私のように、ネイティブのドロップダウンに行くのではなく、あなたのネイティブのエクスポートボタンに加えて、以下のコードで実際に素敵なボタンクリックドロップダウンを実際に得ることができます。ページ長のドロップダウンのプレースホルダーとなる追加のボタンを使用してDTを初期化するには、 'pageLength'引数を渡すだけです。例があります。

$(document).ready(function() { 
    $('#example').DataTable({ 
     dom: 'Bfrtip', 
     // Configure the drop down options. 
     lengthMenu: [ 
      [ 10, 25, 50, -1 ], 
      [ '10 rows', '25 rows', '50 rows', 'Show all' ] 
     ], 
     // Add to buttons the pageLength option. 
     buttons: [ 
      'pageLength','excel','print' 
     ] 
    }); 
}); 

select jsとcssを必ず含めるようにしてください。あなたは「lBfrtip」の代わりに使うよりも、両方のテーブルにドロップダウンボックスOGページあたりのレコードおよびエクスポートボタンを表示したい場合は、here

0

を見つけることができます。 「Bflit」:

$(document).ready(function() { 
     $('#example').DataTable({ 
      dom: 'lBfrtip', 
      buttons: [ 
       'copyHtml5', 
       'excelHtml5', 
       'csvHtml5', 
       'pdfHtml5' 
      ] 
     }); 
    }); 
関連する問題