web-dev-qa-db-ja.com

ボタンのjQuery Datatable DOM配置

JQuery Datatableのバージョンを1.10にアップグレードしました。そして、「ボタン」拡張機能で「Colvis」や「Tabletools」などの廃止されたプラグインを削除しようとしました。ここではすべてうまくいきます。

しかし、私にとっての問題は、「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」または「Button」で利用可能な構成はありますか？

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

jquerytwitter-bootstrapdatatablesdatatables-1.10
10
Raja

<'.class'>または<'#id'>を使用して、dataTables domコントロールに新しい要素を追加します。例：新しい<div id="colvis">要素を改ページの左側に挿入します。<'#colvis'>の前にpを挿入します。

"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要素に永続的に移動します。

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

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

@GreeKatrinaの提案については、はい-しかし、正しい配置方法は次のとおりです。

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

ifもちろん#colvis要素があります。

私の推奨事項：上記のハードコーディングされたソリューションに加えて、特にcolvisボタンをターゲットにする場合、dataTablesボタンをモンキーパッチしてeach 拡張ボタンは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によって挿入された要素である必要はありません。また、インジェクションされた要素をページネーションブロックなどのネイティブコントロール要素と一緒に適切に流す場合は、何らかのスタイル設定を行う必要があることにも注意してください（フィドルで気付かれるかもしれません）。

12
davidkonrad

私はデータテーブルライブラリの専門家ではありませんが、 documentation では、ボタンの複数のコレクションを用意して、それらを個別に挿入できると言っています。また、domオプションに「B」を複数回指定する代わりに使用できる 複数のボタングループ の例もありますが、これは有効ではないと思います。

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

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()
);

うまくいかない場合はお知らせください。回答を更新します。

3
GreeKatrina