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.....
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:
Warning: I had to update all image links in the CSS file to point them to my
images
folder (../images/
instead ofimages/
).2/ Prepare a new asset bundle
Once all assets are here, create a new bundle called
custom-theme.json
in thesrc/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 thetheme="jqueryui"
table attribute).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
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 thesrc/main/resources/dandelion/datatables/
folder, which contains:4/ Activate the extension
Once the ground prepared, you can test your extension by activating it thanks to the
ext
table attribute.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:
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:
Just ensure:
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)