Positionnement jQuery Datatable DOM pour les boutons

Vous ajoutez de nouveaux éléments aux contrôles dom dataTables en utilisant <'.class'> ou <'#id'> . Exemple, insérez un nouvel élément <div id="colvis"> à gauche de la pagination, <'#colvis'> avant p :

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

Les boutons colvis ont la classe .buttons-colvis , de sorte que vous les déplacez en permanence à l'élément #colvis injecté par:

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

C'est le moyen rapide de déplacer le bouton Colvis vers un autre emplacement.

En ce qui concerne la suggestion de @GreeKatrina, oui – mais la méthode de placement correcte est:

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

Si vous avez un élément #colvis bien sûr.

Ma recommandation: Outre la solution codée ci-dessus, où vous ciblez spécifiquement les boutons de colvis, vous pouvez utiliser les boutons de données de patch de monkey pour que chaque bouton étendu puisse avoir une option de container . Après l'initialisation, le bouton est déplacé vers le container spécifié:

 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; } 

Utilisez l'option container :

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

Demo -> http://jsfiddle.net/v4bLv83h/

Comme l'illustre l'exemple, vous pouvez maintenant spécifier un conteneur alternatif pour chaque bouton. Notez que le container peut être n'importe quel élément, il ne doit pas nécessairement être un élément injecté par dom . Notez également (comme vous le remarquez peut-être dans le violon) que vous devez faire un style si vous souhaitez que les éléments injectés s'écoulent correctement avec les éléments de contrôle natifs, tels que le bloc de pagination.

Je ne suis pas un expert avec la bibliothèque de tables de données, mais la documentation indique que vous pouvez avoir plusieurs collections de boutons et les insérer séparément. Il a également un exemple pour plusieurs groupes de boutons que vous pouvez utiliser au lieu de mettre "B" plusieurs fois dans l'option dom , ce que je ne pense pas être valide.

Combinaison d'exemples de la documentation et de votre exemple (non testé):

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

Si cela ne fonctionne pas, faites-le moi savoir et je vais mettre à jour ma réponse.