Dandelion Datatables TEMA JQUERYUI personalizzato

Question

Recentemente ho integrato Datatables con il mio spring 4 mvc + Hibernate 4 + Tiles 3 Progetto.

Tutto funziona bene. Ma ho un problema. Il mio jqueryUI themes non funziona correttamente.

Si prega di dare un'occhiata sotto le immagini.
. 1. Search filter e export links non sono in una riga. Voglio che appaiano in una riga.

Ho provato con dom="ilfrtip" Export Links è scomparso !! Inoltre non ha ottenuto l'output cosa volevo ...!

2. e datatable sorted column appare blu in tutti i temi !!



3. Voglio anche evidenziare Row on Mouse Hover come mostrato qui , ma con il mio colore personalizzato non blu.

4. Voglio anche strisce come mostrato qui , ma con la mia personalizzazione Colori.

Ho usato cssStripes="odd,even", ma non funziona. : (

Quindi voglio applicare tema personalizzato anziché di base temi Temi.

Ho scaricato il mio tema personalizzato da TheReroller Nome PurpleTheme.

Come posso applicarlo a datatables?

Sto caricando temi da proprietà a tema primavera usando la molla themeresolver e themeinterceptor.

<spring:theme code="theme" var="springTheme" />
<datatables:table id="users" data="${list}" 
row="user" rowIdBase="userId" rowIdPrefix="user_"  
displayLength="5" lengthMenu="5,10,15,25,50,100"
jqueryUI="true" theme="jqueryui" themeOption="${springTheme}" 
filterable="true" 
processing="true" autoWidth="true" 
pageable="true" paginationType="full_numbers" 
export="csv,xml,pdf,xls,xlsx" stateSave="true" deferRender="true"   >

.

Qualsiasi aiuto è invitato. Grazie in anticipo .....

Answer 1

Ho appena fatto un test scaricando un tema da TheReroller . Segue i passaggi richiesti per applicare un tema personalizzato utilizzando Dandelion & Dandelion-Datatables V0.10.0.

1 / Scarica e installa le attività relative JQueryUI

Una volta scaricato tutte le risorse da Theroller, posizionarle all'interno del tuo progetto. Nel mio esempio, uso la seguente architettura standard Maven:

src
|__ main
   |__ webapp
      |__ assets
         |__ css
            |__ jquery-ui-1.10.4.custom.css
         |__ images
            |__ ui-bg_*****.png
            |__ ui-icons_****.png

.

Avvertenza: Ho dovuto aggiornare tutti i collegamenti immagine nel file CSS per indicarli alla mia cartella images (../images/ anziché images/).

2 / preparare un nuovo pacchetto di asset

Una volta che tutte le risorse sono qui, crea un nuovo Bundle chiamato custom-theme.json nella cartella src/main/resources/dandelion.

In questo file, devi solo fare riferimento al tuo CSS personalizzato. Non dimenticare di contrassegnare questo pacchetto come dipendente dal jqueryui one (che è già attivato quando si utilizza l'attributo tabella theme="jqueryui").

{
    "bundle" : "custom-theme",
    "dependencies": [ "jqueryui" ],
    "assets": [{
        "name": "jquery-ui-custom",
        "version": "0.10.0",
        "type": "css",
        "locations": {
            "webapp": "/assets/css/jquery-ui-1.10.4.custom.css"
        }
    }]
}

.

3 / Creare un'estensione per Dandelion-DataSables

Attualmente, l'unico modo per utilizzare un'opzione tema personalizzata per il tema jqueryui è creare un'estensione.

Per alleviare la configurazione (lato JSP), ti suggerisco di creare un'estensione (in realtà un tema), che attiverà sia JqueryUI che il tuo tema personalizzato, in modo da non essere più necessario utilizzare theme="jqueryui" più a lungo .

3.1 / Crea una classe che estende AbstractExtension

package com.example;

public class CustomJqueryTheme extends AbstractExtension {

    @Override
    public String getName() {
        return "myTheme";
    }

    @Override
    public void setup(HtmlTable table) {

        // Activate bundles
        AssetRequestContext
            .get(table.getTableConfiguration().getRequest())
                .addBundle("ddl-dt-theme-jqueryui")
                .addBundle("custom-theme");

        // Add "bJQueryUI":true
        addParameter(DTConstants.DT_JQUERYUI, true);

        // Add class="display"
        table.addCssClass("display");
    }
}

.

3.2 / Registra la tua estensione

Quindi, l'estensione deve essere rilevata da Dandelion-Datatables. Per fare ciò, è necessario definire la proprietà [group].main.extension.package nel file di configurazione. Questa proprietà è in realtà un pacchetto in cui Dandelion-Datatables eseguirà la scansione delle estensioni.

Quindi ho aggiunto un nuovo file datatables.properties sotto la cartella src/main/resources/dandelion/datatables/, che contiene:

global.main.extension.package=com.example

.

4 / Attivare l'estensione

Una volta preparato il terreno, è possibile testare l'estensione attivandolo grazie all'attributo della tabella ext.

<datatables:table ... ext="myTheme" ...>
    ...
</datatables:table>

.

Basta passare il nome che hai fornito sopra nel metodo getName() della tua estensione.

5 / Adattare la configurazione

funziona bene senza link all'esportazione. Ma non appena si attiva la funzione di esportazione, Dandelion-Datatables aggiornerà il parametro SOSDER con una nuova lettera: E (per esportazione), quindi rompendo la configurazione precedentemente impostata dal tema jQuery.

Quindi devi solo scavalcare questa impostazione come segue:

<datatables:table ... ext="myTheme" export="csv" dom="<\"H\"lEfr>t<\"F\"ip>">
    ...
</datatables:table>

.

Un'altra opzione sarebbe configurare il parametro SOSDING direttamente nella classe Java CustomJqueryTheme.

Infine, se si desidera aggiornare le righe dispari / persino, basta utilizzare l'attributo della tabella CSSStripes come segue:

<datatables:table ... cssStripes="css-class-for-odd,css-class-for-even">
    ...
</datatables:table>

.

Assicurarsi di:

.
• o usare qualcosa di diverso da "dispari" e "anche" (perché Datatables utilizza queste classi)
• o se vuoi ancora usare "dispari" e "anche", assicurarsi di ignorarli con regole CSS personalizzate.

---

.

Come puoi vedere, non è molto facile. : - /

Ma dovrebbe diventare un po 'più semplice nelle versioni imminenti grazie a miglioramenti nel meccanismo di estensione.

Nota che aggiornerò questa risposta una volta che questo esempio sarà disponibile nelle applicazioni di esempio Dandelion-Datatables ufficiali.

(Disclaimer richiesto da StackOverFlow: I'm L'autore di Dandelion)