ボタンのjQuery Datatable DOMの配置

Question

jQuery Datatableのバージョンを1.10にアップグレードしました。そして、私は "Colvis"や "Tabletools"のような引退したプラグインを "Button"拡張子で削除しようとしました。すべてここでうまくいく。

しかし、私の問題は「Colvis」ボタンを「Tabletool」ボタンから分離できないことです。

"sDom": "B<'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'p>B", 
    "buttons": [ 
     'copyHtml5', 
     'excelHtml5', 
     'csvHtml5',  
     { 
      extend: 'colvis', 
      postfixButtons: [ 'colvisRestore' ], 
      columns: '0,1,2,3,4,5,6' 
     } 
    ], 
    language: { 
     buttons: { 
      colvis: 'Change columns' 
     } 
    } 

ここで、「sDom」の文字「B」はボタンを表します。だから私はすべての4つのボタン（コピー、Excel、CSVとColvis）を1つの行に取得しています。しかし、私は "Colvis"ボタン（コピー、ExcelとCSV）から分離する必要があります。

検索ボックスの近くに1つのボタンを追加する方法はありますか。ページングの近くにもう1つのボタンを追加する方法はありますか？

OR

"SDOM" や "ボタン" で利用可能な任意の構成はありますか？

ありがとうございました！

Answer 1

<'.class'>または<'#id'>を使用して、dataTables DOMコントロールに新しい要素を追加します。

$('.buttons-colvis').detach().appendTo('#colvis') 

：あなたがによって注入 #colvis要素に恒久的にそれらを移動して、

"sDom": "B<'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'<'#colvis'>p>" 

colvisボタンがクラス.buttons-colvisを持っている：例、改ページの左側、<'#colvis'>p前に新しい<div id="colvis">要素を挿入

これは、colvisボタンを別の場所にすばやく移動する方法です。

GreeKatrinaの提案@について

---

、はい - しかし、正しい配置方法は次のとおりです。

var colvis = new $.fn.dataTable.Buttons(table, { 
    buttons: [ 
     { 
      extend: 'colvis', 
      ... 
     } 
    ] 
}) 
colvis.container().appendTo('#colvis') 

あなたはもちろんの#colvis要素を持っている場合。

は

---

私の推薦：上記のハードコーディングソリューションに加えて 、あなたが特にcolvisボタンをターゲット、あなたは猿パッチのDataTableボタンはそう各拡張ボタンがcontainerオプションを持つことができる可能性があります。containerオプションを使用

var org_buildButton = $.fn.DataTable.Buttons.prototype._buildButton; 
$.fn.DataTable.Buttons.prototype._buildButton = function(config, collectionButton) { 
    var button = org_buildButton.apply(this, arguments); 
    $(document).one('init.dt', function(e, settings, json) { 
     if (config.container && $(config.container).length) { 
      $(button.inserter[0]).detach().appendTo(config.container) 
     } 
    })  
    return button; 
} 

：初期化した後、ボタンはcontainer指定に移動され

{ 
    extend: 'colvis', 
    postfixButtons: [ 'colvisRestore' ], 
    container : '#colvis', //<--- 
    columns: '0,1,2,3,4,5' 
} 

デモ - >http://jsfiddle.net/v4bLv83h/

の例が示すように、あなたは今指定することができます各ボタンごとの代替コンテナ。 containerは任意の要素にすることができ、domによって注入される要素である必要はありません。また、ページングブロックなどのネイティブコントロール要素とともに注入された要素を適切に流したい場合は、スタイリングを行う必要があることに注意してください（フィディングで気づくかもしれません）。

Answer 2

私はデータテーブルライブラリの専門家ではありませんが、documentationには複数のボタンのコレクションを入れて別々に挿入することができます。また、domオプションに "B"を複数回入れる代わりに使用できるmultiple button groupsの例がありますが、これは有効ではないと思います。それは私が知っていると私は私の答えを更新します動作しない場合

var table = $('#myTable').DataTable({ 
    dom: "B<'#colvis row'><'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'p>", 
    buttons: [ 
     'copyHtml5', 
     'excelHtml5', 
     'csvHtml5' 
    ] 
}); 

new $.fn.dataTable.Buttons(table, { 
    buttons: [ 
     { 
      extend: 'colvis', 
      // Shorter than using the language.buttons.colvis option 
      text: 'Change columns', 
      postfixButtons: [ 'colvisRestore' ], 
      columns: '0,1,2,3,4,5,6' 
     } 
    ] 
}); 

// To append it at the bottom of the table 
// 3 since the colvis button is at the 3rd index in the buttons array 
table.buttons(3, null).container().appendTo(
    table.table().container() 
); 

// To append it on the first row after the buttons, in the #colvis row 
table.buttons(3, null).container().appendTo(
    $('#colvis'), table.table().container() 
); 

：ドキュメントとあなたの例（テストされていない）からの例を組み合わせる

。