Estilo de tabla de datos para que el botón de arranque aparezca en la misma fila que otros elementos

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

¿Alguna sugerencia para ponerlos a 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' );
      }
    }]
  });
});

SOLUCIÓN #1

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

Tienes que usar especialmente diseñado dom opción similar a 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>>",

Puedes ser tan creativo como quieras usando Bootstrap row y col-* clases en el dom opción.

Ver este violín js para código y demostración.

SOLUCIÓN #2

También puede usar el método de inserción directa como se muestra en este ejemplo porque por defecto dom La opción 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 hay un tema con DataTables 1.10.9 evitando la inserción directa de botones si no hay B personaje en dom opción o dom No se especifica la opción.

Ver este violín js para código y demostración.

En mi caso acabo de agregar estos estilos:

.dataTables_length,.dataTables_filter {
    margin-left: 10px;
    float: right;
}

Tienes que poner dos divs: uno para los botones de la tabla de datos y otro para tu 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

Así es como lo hice.

"dom": '<"row"<"col-6"<"d-flex justify-content-start"<""l><"ml-4"i>>><"col-6"<"d-flex justify-content-end"<""f>>>>tp'

También agregue algo de CSS personalizado para que las cosas aparezcan más en línea.

div.dataTables_wrapper div.dataTables_info{
   padding-top: 0.2em !important; 
 }

En mi caso, acabo de agregar este CSS

.dataTables_wrapper .dataTables_length {
    float:left;
    position: absolute;
}
.dataTables_wrapper .dataTables_filter {
    float: right;
}

Puede agregar botones en el menú de la barra de herramientas como se muestra a continuación:

        initComplete: function(){
            $("div.toolbar").html('<input type="button");          
        }

luego agregue esta barra de herramientas al elemento DOM de Datatables como se muestra a continuación:

    dom: "<'row'<'col-sm-2'l><'toolbar'><'col-sm-8'f>>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'row'<'col-sm-5'i><'col-sm-7'p>>",
                

Uno puede alinear esta barra de herramientas usando css como se muestra a continuación: .toolbar { float: left; margen izquierdo: 60px; }

Eche un vistazo a la documentación de DataTable Aquí.

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