Anfügen Custom Controls dom Tables mit Bootstrap mit

Question

Ich habe für die Suche pro Spalte einen select (Drop-Down) für Datentabellen Suchfeld hinzugefügt und versuchen, diese wählen hinzuzufügen, wie unten- zur Suche>

var table = $('#example').DataTable({ 
dom: '<l<"toolbar">f>rtip', 
      language: { 
       search: "_INPUT_", //To remove Search Label 
       searchPlaceholder: "Search..." 
      } 
}) 
$("div.toolbar").html(select); 

CSS

.toolbar { 
     float: right; 
    } 

Es funktionierte tatsächlich an der Geige ->https://jsfiddle.net/32v2qpj1/5/

Überraschenderweise Länge und Filterposition zu ändern, als ich das gleiche auf meinem ASPX p umgesetzt Alter wie unter Bild. Bootstrap-Zeilen- und -Spaltenraster fehlen, wenn ich dom verwende. Es fügt als 2 getrennte Reihen für Länge und Suche und als gleiches am Fuß hinzu. Ich habe versucht, Beispiele aus https://datatables.net/reference/option/dom zu überprüfen, ob mein Code falsch ist. Es wird nur neu positioniert, wenn DOM verwendet wird!

Ich habe keine Ahnung, warum es Neupositionierung wenn nur dom hinzugefügt. Ich habe mich gefragt, ob es eine andere Möglichkeit gibt, dem Suchfeld eine Auswahl an Steuerelementen hinzuzufügen.

Answer 1

Gut. Wenn Sie die dom Option gesetzt ist, dann überschreiben Sie die Standard dom Einstellung, die in Datentabellen mit Bootstrap ist:

"<'row'<'col-sm-6'l><'col-sm-6'f>>" + 
"<'row'<'col-sm-12'tr>>" + 
"<'row'<'col-sm-5'i><'col-sm-7'p>>", 

Es gibt keinen Grund für ein .toolbar Injektion, wenn wir ein vordefiniertes Setup wie diese. geben Anstelle dem Filterabschnitt ein wenig mehr Platz:

"<'row'<'col-sm-5'l><'col-sm-7'f>>" + 

und eine maximale Breite für die #select definieren:

select#select { 
    width: 100px; 
    display: inline-block; 
} 

Schließlich fügt Standard Bootstrap Klassen zum #select:

<select id="select" class="form-control input-sm"> 

und Hängen Sie die Auswahl an .dataTables_filter an:

$(".dataTables_filter").append(select); 

Dies gibt die ansprechende Erfahrung, die wir von Bootstrap wollen.

aktualisiert Geige ->https://jsfiddle.net/32v2qpj1/6/

---

NB: Denken Sie daran, jquery.dataTables.min.css zu entfernen, wenn Sie Bootstrap verwenden! Stattdessen style die <table> Bootstrap Weg:

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">