jQuery Datatable DOM posicionamiento para botones

elemento a la izquierda de la paginación, <'#colvis'> antes de p :

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

colvis botones tiene la clase .buttons-colvispara que los muevas permanentemente a los inyectados #colvis elemento por:

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

Esta es la forma rápida de mover el botón colvis a otra ubicación.

---

Con respecto a la sugerencia de @ GreeKatrina, sí, pero el método de ubicación correcto es:

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

si usted tiene un #colvis elemento por supuesto.

---

Mi recomendación :
Además de la solución codificada anterior, donde apunta específicamente a los botones colvis, podría parchear los botones de las tablas de datos para que cada botón extendido puede tener un container opción. Después de la inicialización, el botón se mueve al lugar especificado. 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;

utilizar el container opción :

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

demostración -> http://jsfiddle.net/v4bLv83h/

Como demuestra el ejemplo, ahora puede especificar un contenedor alternativo para todos y cada uno de los botones. Tenga en cuenta que container puede ser cualquier elemento, no tiene que ser un elemento inyectado por dom. También tenga en cuenta (como puede notar en el violín) que necesita hacer algo de estilo si desea que los elementos inyectados fluyan correctamente junto con los elementos de control nativos, como el bloque de paginación.

No soy un experto en la biblioteca de tablas de datos, pero la documentación dice que puede tener múltiples colecciones de botones e insertarlos por separado. También tiene un ejemplo para varios grupos de botones que podría usar en lugar de poner "B" varias veces en el dom opción, que no creo que sea válida.

Combinando los ejemplos de la documentación y su ejemplo (no probado):

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 no funciona, hágamelo saber y actualizaré mi respuesta.

valoraciones y reseñas

---

---

Utiliza Nuestro Buscador