Datatable-styling, so bootstrap-Taste erscheint auf der gleichen Zeile wie die anderen Elemente

Ich bin mit jQuery DataTables plugin und Bootstrap auf meine rails-Website. Ich kann nicht meine benutzerdefinierte Schaltfläche und andere Tabelle-header-Elemente zu verschachteln, in der gleichen Zeile, Sie gestapelt werden, statt inline.

Irgendwelche Vorschläge, um Sie alle auf der gleichen Linie?

Hier finden Sie einige JavaScript-Code, die ich verwendet habe:

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

InformationsquelleAutor ToddT | 2015-08-27

  1. 42

    LÖSUNG #1

    Dies ist die am meisten verwirrend Teil mit der Verwendung von Bootstrap-Stil für das jQuery-DataTables-und es ist ohne Papiere so weit. Bootstrap-extension überschreibt Standard - dom bestätigt werden kann durch anzeigen der Quellcode.

    Verwenden Sie die speziell gestaltete dom option ähnlich wie unten gezeigt:

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

    Können Sie so kreativ wie Sie wollen, indem Sie Bootstrap row und col-* Klassen in der dom option.

    Sehen dieses jsFiddle für code und demonstration.

    LÖSUNG #2

    Können Sie auch direkte insertion-Methode, wie gezeigt, in dieses Beispiel da Standard dom option verwendet für die Bootstrap-styling ist Recht Komplex.

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

    Beachten Sie, dass code unterscheidet sich von dem Beispiel oben verwiesen, da eine Problem mit DataTables 1.10.9 verhindert direktes einfügen von Tasten, wenn es keine B Charakter in dom option oder dom option nicht angegeben ist.

    Sehen dieses jsFiddle für code und demonstration.

    Wow.. einfach nur wow.. Danke Gyrocode.. macht Total Sinn, aber wie um alles in der Welt hast du diese Figur ein?? Eine Letzte Frage.. Wie fügen Sie eine zweite benutzerdefinierte Schaltfläche auf der gleichen Linie?
    hatte das gleiche problem und herausgefunden, indem Sie den source-code der extension. jQuery DataTables ist eine ausgezeichnete Bibliothek, aber ich wünschte, dieser Teil dokumentiert wurde besser.
    Genial.. Wie fügen Sie eine zweite benutzerdefinierte Schaltfläche, die die gleiche Linie?
    Ich bin immer noch das erlernen der neuen features in 1.10.8, aber ich vermute, es getan werden sollte, als in dieses jsFiddle.
    Du bist der MVP.

    InformationsquelleAutor Gyrocode.com

  2. 1

    Muss man zwei divs: eine für die datatable-buttons und andere für den benutzerdefinierten code

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

    Dann definieren, div class in der css:

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

    Beispiel-Bild

    InformationsquelleAutor Felix Bagur

  3. -3

    Haben Sie einen Blick auf die Dokumentation der DataTable Hier.

    versuchen, diese dom: '<"toolbar">frtip'

    Ja selbst das Beispiel legt die search-Leiste und den text, den Sie eingefügt.. siehe hier live.datatables.net/coqisori/1
    .toolbar { float: left; } hinzufügen. krank arbeiten wie ein Charme.
    Das wird nicht korrekt funktionieren mit Bootstrap-styling. Außerdem verpasst du die B option.
    warum nach unten Stimmen diese arbeiten für den link u erwähnt?

    InformationsquelleAutor Asad Ali

  4. -3

    Setzen style="display: inline" auf die Elemente, die Sie display inline.

    Klingt gut, aber wie Messen Sie in einer Klasse sowohl eine benutzerdefinierte Schaltfläche, und die Elemente in der Kopfzeile der Datatables-plugin??
    Warum können Sie nicht? Poste deinen code, damit ich sehen kann was du meinst.

    InformationsquelleAutor raduation

Schreibe einen Kommentar