Thème jqueryUI personnalisé Dandelion Datatables

Question

Récemment j'ai intégré tables de données avec moi spring 4 mvc + Hibernate 4 + Tiles 3 Projet.

Tout fonctionne bien.Mais j'ai un problème.Mon jqueryUI themes ne fonctionnent pas correctement.

Veuillez jeter un œil aux images ci-dessous.
1. Search filter et export links ne sont pas sur une seule rangée.Je veux qu'ils apparaissent sur une seule ligne.

j'ai essayé avec dom="ilfrtip" Les liens d'exportation ont disparu !!De plus, je n'ai pas obtenu le résultat que je voulais... !

2. Et datatable sorted column apparaît bleu dans tous les thèmes !!

3. Je souhaite également mettre en surbrillance la ligne lors du survol de la souris, comme indiqué ici, mais avec mon couleur personnalisée pas bleu.

4. Je veux aussi des rayures comme indiqué ici, mais avec mes couleurs personnalisées.

j'ai utilisé cssStripes="odd,even", mais ne fonctionne pas.:(

Je souhaite donc appliquer un thème personnalisé au lieu d'un thème basique Options du thème thèmes.

J'ai téléchargé mon thème personnalisé depuis ThèmeRoller nom PurpleTheme.

Comment puis-je appliquer cela à datatables?

Je charge des thèmes à partir des propriétés du thème Spring en utilisant Spring themeresolver et 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"   >

Toute aide est invitée.Merci d'avance.....

Answer 1

Je viens de faire un test en téléchargeant un thème depuis ThèmeRoller.Voici les étapes requises pour appliquer un thème personnalisé à l'aide de Dandelion & Dandelion-Datatables v0.10.0.

1/ Téléchargez et installez les ressources liées à jQueryUI

Une fois que vous avez téléchargé tous les éléments depuis ThemeRoller, placez-les dans votre projet.Dans mon exemple, j'utilise l'architecture Maven standard suivante :

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

Avertissement: J'ai dû mettre à jour tous les liens d'image dans le fichier CSS pour les pointer vers mon images dossier (../images/ au lieu de images/).

2/ Préparer un nouveau bundle d'actifs

Une fois que tous les éléments sont ici, créez un nouveau paquet appelé custom-theme.json dans le src/main/resources/dandelion dossier.

Dans ce fichier, il vous suffit de référencer votre CSS personnalisé.N'oubliez pas de marquer ce bundle comme dépendant du jqueryui un (qui est déjà activé lorsque vous utilisez le theme="jqueryui" attribut de table).

{
    "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/ Créer une extension pour Dandelion-Datatables

Actuellement, la seule façon d'utiliser une option de thème personnalisé pour le jqueryui le thème est de créer une extension.

Afin d'alléger la configuration (côté JSP), je vous suggère de créer une extension (en fait un thème), qui activera à la fois jQueryUI et votre thème personnalisé, afin que vous n'ayez pas besoin d'utiliser theme="jqueryui" plus longtemps.

3.1/ Créer une classe qui s'étend 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/ Enregistrez votre extension

Ensuite, votre extension doit être détectée par Dandelion-Datatables.Pour ce faire, vous devez définir le [group].main.extension.package propriété dans le fichier de configuration.Cette propriété est en fait un package dans lequel Dandelion-Datatables recherchera les extensions.

J'ai donc ajouté un nouveau datatables.properties dossier sous le src/main/resources/dandelion/datatables/ dossier, qui contient :

global.main.extension.package=com.example

4/ Activer l'extension

Une fois le terrain préparé, vous pourrez tester votre extension en l'activant grâce au ext attribut de table.

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

Passez simplement le nom que vous avez donné ci-dessus dans le champ getName() méthode de votre extension.

5/ Adapter la configuration

Cela fonctionne bien sans liens d'exportation.Mais dès que vous activerez la fonctionnalité d'export, Dandelion-Datatables mettra à jour le paramètre sDom avec une nouvelle lettre : E (pour l'Export), cassant donc la configuration précédemment définie par le thème jQuery.

Il vous suffit donc de remplacer ce paramètre comme suit :

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

Une autre option serait de configurer le paramètre sDom directement dans ce qui précède CustomJqueryTheme Classe Java.

Enfin, si vous souhaitez mettre à jour les lignes paires/impaires, utilisez simplement l'attribut de table cssStripes comme suit :

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

Assurez-vous simplement :

• soit d'utiliser quelque chose de différent de "impair" et "pair" (car les Datatables utilisent ces classes)
• ou si vous souhaitez toujours utiliser « impair » et « pair », assurez-vous de les remplacer par des règles CSS personnalisées.

---

Comme vous pouvez le constater, ce n'est pas très facile.:-/

Mais cela devrait devenir un peu plus simple dans les prochaines versions grâce aux améliorations du mécanisme d'extension.

Notez que je mettrai à jour cette réponse une fois que cet exemple sera disponible dans les exemples d'applications officielles Dandelion-Datatables.

(Avis de non-responsabilité requis par StackOverflow :Je suis l'auteur de Dandelion)