web-dev-qa-db-fra.com

Style pouvant être daté pour que le bouton bootstrap apparaisse sur la même ligne que les autres

J'utilise le plugin jQuery DataTables et Bootstrap sur mon site Rails. Je ne parviens pas à imbriquer mon bouton personnalisé et d'autres éléments d'en-tête de tableau dans la même ligne. Ils sont empilés au lieu d'être en ligne. 

Des suggestions pour les mettre tous sur la même ligne? 

Voici quelques exemples de JavaScript que j'ai utilisés:

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

SOLUTION N ° 1

C’est la partie la plus déroutante avec l’utilisation du style Bootstrap pour jQuery DataTables et elle n’a pas encore été documentée. L'extension Bootstrap remplace la valeur par défaut dom , qui peut être confirmée en affichant son code source . 

Vous devez utiliser une option spécialement conçue dom similaire à celle illustrée ci-dessous:

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>>",

Vous pouvez être aussi créatif que vous le souhaitez en utilisant les classes Bootstrap row et col-* dans l'option dom .

Voir this jsFiddle pour le code et la démonstration.

SOLUTION N ° 2

Vous pouvez également utiliser la méthode d'insertion directe comme indiqué dans cet exemple car l'option par défaut dom utilisée pour le style Bootstrap est assez complexe.

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

Notez que le code diffère de l'exemple cité ci-dessus car il existe un issue avec DataTables 1.10.9 empêchant l'insertion directe de boutons s'il n'y a pas de caractère B dans l'option dom ou l'option dom n'est pas spécifié.

Voir this jsFiddle pour le code et la démonstration.

43
Gyrocode.com

Vous devez mettre deux divs: un pour les boutons datatable et l'autre pour votre code personnalisé

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

Puis définissez div class dans votre css:

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

Exemple d'image

1
Felix Bagur