jquery - forma - elementos dinamicos html

Estilo de datos que el botón de arranque aparece en la misma fila que otros elementos

Question

Estoy usando el plugin jQuery DataTables y Bootstrap en mi sitio de rieles. No puedo hacer que mi botón personalizado y otros elementos de encabezado de tabla se aniden en la misma fila, se apilan en lugar de estar en línea.

¿Alguna sugerencia para ponerlos todos en la misma línea?

Aquí hay algunos de los JavaScript que he usado:

$(document).ready(function() {
  $(''#products'').DataTable( {
    dom: ''Blfrtip'',
    buttons: [ {
      text: ''Pull my products'',
      action: function ( e, dt, node, config ) {
        alert( ''Button activated'' );
      }
    }]
  });
});

Answer 1

SOLUCIÓN # 1

Esta es la parte más confusa de usar el estilo Bootstrap para jQuery DataTables y hasta ahora no está documentada. La extensión Bootstrap anula el dom predeterminado que se puede confirmar al ver su código fuente .

Tienes que usar una opción de dom especialmente diseñada como la que se muestra a continuación:

dom: 
    "<''row''<''col-sm-3''l><''col-sm-6 text-center''B><''col-sm-3''f>>" +
    "<''row''<''col-sm-12''tr>>" +
    "<''row''<''col-sm-5''i><''col-sm-7''p>>",

Puede ser tan creativo como quiera utilizando las clases de row y col-* Bootstrap en la opción dom .

Vea este jsFiddle para el código y la demostración.

SOLUCIÓN # 2

También puede usar el método de inserción directa como se muestra en este ejemplo porque la opción dom predeterminada utilizada para el estilo Bootstrap es bastante compleja.

var table = $(''#example'').DataTable({
   initComplete: function(){
      var api = this.api();

      new $.fn.dataTable.Buttons(api, {
         buttons: [
            {
               text: ''Pull my products'',
               action: function ( e, dt, node, config ) {
                  alert( ''Button activated'' );
               }
            }
         ]
      });

      api.buttons().container().appendTo( ''#'' + api.table().container().id + '' .col-sm-6:eq(0)'' );  
   }
});

Tenga en cuenta que el código difiere del ejemplo mencionado anteriormente porque existe un issue con DataTables 1.10.9 que impide la inserción directa de botones si no hay un carácter B en la opción dom o no se especifica la opción dom .

Vea este jsFiddle para el código y la demostración.

Answer 2

Debe colocar dos divs: uno para los botones de datos y otro para su código personalizado

       var table = $("#tbl_oferta").dataTable({
                dom: ''<"pime-grid-button"B><"pime-grid-filter">frtip'',
        ...
       });

       $("div.pime-grid-filter").html(''<b>Custom tool bar! Text/images etc.</b>'');

Luego define la clase div en tu css:

.pime-grid-button{float:left}
.pime-grid-filter{float:left;margin-left:10px}        

Imagen de muestra

Answer 3

Echa un vistazo a la documentación de DataTable Here .

prueba este dom: ''<"toolbar">frtip''

Answer 4

Ponga style="display: inline" en los elementos que desea mostrar en línea.