jQuery UI-themes in datatables plugin

Verwende ich das jquery datatables plugin Hinzugefügt und einige benutzerdefinierte jquery-ui-Tasten, um den Tabellenfuß.
Die Verwendung der datatables-plugin mit dem jquery-ui-themes die "bJQueryUI" - option muss eingeschaltet werden.

Soweit kein problem, aber jetzt habe ich noch die jquery-ui-themeroller auf meiner Seite.

Wenn ich das Thema ändern, werden alle, die jquery-ui-Komponenten ändern Ihren Stil entsprechend, ebenso wie die datatable, mit Ausnahme der Tasten innerhalb der datatable.

Fand ich heraus, dass es ist eigentlich eine css-Schwerpunktthema: die neuen styles von den themeroller haben niedrigere Priorität als die original-Stile, so dass diese Tasten nie ändern Ihr Aussehen.

Als die jquery-ui-Komponenten und die datatables-plugin, beide sind ziemlich beliebt, ich dachte, ich würde jemanden finden, mit ähnlichen Problemen, hatte aber kein Glück so weit..

Das ist, wie die Initialisierung der datatable und der Erstellung der benutzerdefinierten Schaltflächen durchgeführt werden:

<table id="DataTable">
//...
</table>
<script type="text/javascript">
    $(function ()
    {
        var oDataTable = $('#DataTable').dataTable({
            "aaData": result.aaData,
            "bPaginate": false,
            "bJQueryUI": true,
            "bInfo": true,
            "sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ipT<"toolbar">>',
            "oTableTools":
            {
                "sRowSelect": "single"
            }
        });
        //add buttons
        $("div.toolbar").html('<button id="AddButton">New element</button>');
        $("#AddButton").button().click(function () { /* ... */ });
        //add more buttons...
    }
</script>

Hier ein screenshot der eigentlichen html-Struktur und die angewandten css-styles:
http://i.stack.imgur.com/vbAuy.jpg

Jeder Tipp ist sehr willkommen.

  • Ist es die "bJQueryUI" das ist das styling der buttons, und überschreiben Sie die jQuery UI-theme?
InformationsquelleAutor Gigo | 2011-07-18
  1. 1

    Fand ich die Lösung selber:

    Wenn ich die "ui-widget-content" CSS-Klasse für das Menü-div-container, der styles bekommen Sie korrekt angewendet.
    Entfernen Sie die Stile, die diese Klasse gilt (Rand und hintergrund), ich fügte hinzu, ein spezifischer CSS-Stil, um diese zu entfernen:

    div.toolbar
{
    float: right;
    border: 0;
    background: 0;
}

    Es ist wichtig hier die Verwendung von "div.toolbar" nicht ".Symbolleiste", da sonst die ui-widget-content-Stile angewendet werden.
    Nun ist die Symbolleiste container nicht unerwünschte Formatvorlagen angewendet, und die Tasten im inneren korrekt erhalten das gewählte Motiv.

    Vielleicht ist das hilfreich für jemanden, der mit dem themeroller mit benutzerdefinierten jquery-ui-Schaltflächen in Datentabellen.

    InformationsquelleAutor Gigo
  2. 0

    WENN Sie möchten, das Thema zu Steuern den Stil der Taste, dann kommentieren Sie das CSS, das übergeordnete Thema roller-Stil.

    Wenn Sie Themen-buttons, dann werden Sie haben, um Ihr CSS zu erlauben, das Thema zu nehmen, beeinflussen. Themen werden leicht über-schreibbar, so können Sie die Anpassung, nur es klingt wie Sie nicht mehr wollen, dass Sie die Anpassung.

    • Die CSS, die das überschreiben, das Thema roller-Stil ist das ursprüngliche Thema. Wenn ich den Kommentar aus, die Seite wird nach oben geschraubt. Ich wusste nicht, ändern Sie die Formatvorlagen, die Sie sind alle jquery-ui-standard.
    • Kann ich die Texte ändern Records Per Page um nur die Datensätze, in datatables plugin. und kann ich einen Placeholder im search Textfeld eher als ein "Label" suchen.
    • Die Suchfunktion ist rechts ausgerichtet in Datentabellen. kann ich die Angleichung von such-Textfeld Linksbündig auf einer bestimmten Seite?
    InformationsquelleAutor b01
  3. 0

    Nicht sicher, wenn Sie hatte dieses problem, aber es sind zwei verschiedene css-Klassen mit datatables. Die man zu verwenden, hängt davon ab, ob bJQueryUI:true oder bJQueryUI:false

    InformationsquelleAutor bmoran
Schreibe einen Kommentar