Dandelion Datatables Custom jqueryUI theme

问题

Recently I integrated datatables with my spring 4 mvc + Hibernate 4 + Tiles 3 Project.

Everything is working fine. But I have one issue. My jqueryUI themes are not working properly.

Please have a look in below images.
1. Search filter and export links are not in one row. I want them to appear in one row.

I tried with dom="ilfrtip" Export links disappeared!! Also did not get output what I wanted...!

And datatable sorted column appears blue in all themes !!

I also want to highlight row on mouse hover as shown here, but with my custom color not blue.
I also want stripes as shown here, but with my custom colors.

I used cssStripes="odd,even", but not working. :(

So I want to apply custom theme instead of basic themeoptions themes.

I have downloaded my custom theme from ThemeRoller name PurpleTheme.

How can I apply this to datatables?

I am loading themes from spring theme properties using spring themeresolver and 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"   >

Any help is invited. Thank you in advance.....

回答1:

I just made a test by downloading a theme from ThemeRoller. Here follows the required steps to apply a custom theme using Dandelion & Dandelion-Datatables v0.10.0.

1/ Download and install the jQueryUI-related assets

Once you've downloaded all assets from ThemeRoller, place them inside your project. In my example, I use the following standard Maven architecture:

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

Warning: I had to update all image links in the CSS file to point them to my images folder (../images/ instead of images/).

2/ Prepare a new asset bundle

Once all assets are here, create a new bundle called custom-theme.json in the src/main/resources/dandelion folder.

In this file, you just need to reference your custom CSS. Don't forget to mark this bundle as dependent of the jqueryui one (which is already activated when you use the theme="jqueryui" table attribute).

{
    "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/ Create an extension for Dandelion-Datatables

Currently, the only way to use a custom theme option for the jqueryui theme is to create an extension.

In order to alleviate the configuration (JSP-side), I suggest you to create an extension (actually a theme), that will activate both jQueryUI and your custom theme, so that you don't need to use theme="jqueryui" any longer.

3.1/ Create a class that extends 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/ Register your extension

Then, your extension must be detected by Dandelion-Datatables. To do so, you must define the [group].main.extension.package property in the configuration file. This property is actually a package where Dandelion-Datatables will scan for extensions.

So I added a new datatables.properties file under the src/main/resources/dandelion/datatables/ folder, which contains:

global.main.extension.package=com.example

4/ Activate the extension

Once the ground prepared, you can test your extension by activating it thanks to the ext table attribute.

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

Just pass the name you have given above in the getName() method of your extension.

5/ Adapt the configuration

It works well without export links. But as soon as you activate the export feature, Dandelion-Datatables will update the sDom parameter with a new letter: E (for Export), therefore breaking the configuration previously set by the jQuery theme.

So you just need to override this setting as follows:

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

Another option would be to configure the sDom parameter directly in the above CustomJqueryTheme Java class.

Finally, if you want to update the odd/even rows, just use the cssStripes table attribute as follows:

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

Just ensure:

either to use something different than "odd" and "even" (because Datatables use these classes)
or if you still want to use "odd" and "even", make sure to override them with custom CSS rules.

As you can see, it's not very easy. :-/

But it should become a bit simpler in upcoming versions thanks to improvements in the extension mechanism.

Note that I'll update this answer once this example will be available in the official Dandelion-Datatables sample applications.

(Disclaimer required by StackOverflow: I'm the author of Dandelion)

来源：https://stackoverflow.com/questions/24032270/dandelion-datatables-custom-jqueryui-theme

标签

Spring