jQuery Datatable DOM-Positionierung für Schaltflächen

8

Ich habe gerade meine Version von jQuery Datatable auf 1.10 aktualisiert. Und dann habe ich versucht, sein pensioniertes Plugin wie "Colvis" und "TableTools" mit der "Button" -Erweiterung zu entfernen. Hier funktioniert alles gut.

Aber das Problem für mich ist, ich konnte den "Colvis" -Knopf nicht von den "TableTool" -Knöpfen trennen.

%Vor%

Wo im "sDom" steht der Buchstabe "B" für Buttons. So bekomme ich alle vier Buttons (Copy, Excel, CSV und Colvis) in einer Zeile. Aber ich brauche die Schaltfläche "Colvis", um von (Copy, Excel und CSV) getrennt zu werden.

Also Gibt es eine Möglichkeit, eine Schaltfläche in der Nähe des Suchfelds und eine weitere in der Nähe der Seitennumerierung hinzuzufügen?

ODER

Gibt es eine Konfiguration im "sDom" oder im "Button"?

Danke!

    
Raja 22.12.2015, 13:15
quelle

2 Antworten

8

Sie fügen den dom-Steuerelementen von dataTables neue Elemente hinzu, indem Sie <'.class'> oder <'#id'> verwenden. Beispiel: Fügen Sie ein neues <div id="colvis"> -Element links von der Seitennummerierung ein, <'#colvis'> vor p :

%Vor%

colvis buttons hat die Klasse .buttons-colvis , also verschiebst du sie dauerhaft in das injected #colvis Element von:

%Vor%

Dies ist die schnelle Methode, um die Schaltfläche "colvis" an einen anderen Ort zu verschieben.

Was den Vorschlag von @ GreeKatrina betrifft, ja - aber die richtige Platzierungsmethode ist:

%Vor%

wenn Sie natürlich ein #colvis -Element haben.

Meine Empfehlung: Neben der oben beschriebenen hardcodierten Lösung, bei der Sie gezielt auf die Colvis-Schaltflächen zielen, können Sie dataTables-Schaltflächen für Monkey-Patches verwenden, sodass jeder erweiterte Button die Option container haben kann. Nach der Initialisierung wird der Button in die angegebene container :

verschoben %Vor%

Verwenden Sie die Option container :

%Vor%

demo - & gt; Ссылка

Wie das Beispiel zeigt, können Sie nun für jede Schaltfläche einen alternativen Container angeben. Beachten Sie, dass container ein beliebiges Element sein kann, es muss kein von dom injiziertes Element sein. Beachten Sie auch (wie Sie vielleicht an der Geige bemerken), dass Sie ein wenig ansteuern müssen, wenn Sie die injizierten Elemente zusammen mit den nativen Steuerelementen, wie z. B. dem Paginierungsblock, fließen lassen möchten.

    
davidkonrad 03.01.2016, 13:40
quelle
3

Ich bin kein Experte für die Datentabellenbibliothek, aber die Dokumentation sagt, dass Sie mehrere haben können Sammlungen von Schaltflächen und fügen Sie sie separat ein. Es gibt auch ein Beispiel für mehrere Schaltflächengruppen , die Sie verwenden könnten, anstatt "B" mehrere zu setzen mal in der Option dom , die ich glaube nicht, ist gültig.

Kombinieren Sie die Beispiele aus der Dokumentation und Ihrem Beispiel (nicht getestet):

%Vor%

Wenn es nicht funktioniert, lass es mich wissen und ich werde meine Antwort aktualisieren.

    
GreeKatrina 30.12.2015 19:37
quelle