59758

Dandelion Datatables Custom jqueryUI theme

Question:

Recently I integrated <a href="http://dandelion.github.io/datatables/" rel="nofollow">datatables</a> 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. <br /> 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...!

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/vn27t.png" data-original="https://i.stack.imgur.com/vn27t.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

<ol start="2"><li>And datatable sorted column appears <strong>blue</strong> in all themes !!</li> </ol>

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/HbsHy.jpg" data-original="https://i.stack.imgur.com/HbsHy.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

<ol start="3"><li>

I also want to highlight row on mouse hover as shown <a href="http://datatables.net/examples/styling/hover.html" rel="nofollow">here</a>, but with my <strong>custom color</strong> not blue.

</li> <li>

I also want stripes as shown <a href="http://datatables.net/examples/styling/hover.html" rel="nofollow">here</a>, but with my custom colors.

</li> </ol>

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

So I want to apply custom theme instead of basic <a href="http://dandelion.github.io/datatables/docs/ref/configuration/#themeoptions" rel="nofollow">themeoptions</a> themes.

I have downloaded my custom theme from <a href="http://jqueryui.com/themeroller/" rel="nofollow">ThemeRoller</a> 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.....

Answer1:

I just made a test by downloading a theme from <a href="http://jqueryui.com/themeroller/" rel="nofollow">ThemeRoller</a>. Here follows the required steps to apply a custom theme using Dandelion & Dandelion-Datatables v0.10.0.

<h2>1/ Download and install the jQueryUI-related assets</h2>

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

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

<h2>2/ Prepare a new asset bundle</h2>

Once all assets are here, create a new <a href="http://dandelion.github.io/dandelion/features/asset-bundles/introducing-asset-bundles.html" rel="nofollow">bundle</a> 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" } }] } <h2>3/ Create an extension for Dandelion-Datatables</h2>

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.

<strong>3.1/ Create a class that extends AbstractExtension</strong>

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"); } }

<strong>3.2/ Register your extension</strong>

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 <h2>4/ Activate the extension</h2>

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.

<h2>5/ Adapt the configuration</h2>

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:

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

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.

<em>(Disclaimer required by StackOverflow: I'm the author of Dandelion)</em>

Recommend

  • Unable to include jquery.dataTables.min.js in html
  • How to use server side option in Angular DataTables with the Angular way example?
  • clear ordering from dataTables stateSave
  • How to fetch json data from php for datatables jquery plugin
  • Ruby Multiple OR Evaluations For String Value
  • How can I read in multiple excel files in SPSS using a macro?
  • Send data to WPF singleton application from other process
  • Formula in Excel that references another Excel file based on cell reference
  • Excel Range in C# using interop.Excel. Range both empty and not empty?
  • Removing levels from data frame read from CSV file - R
  • Memory usage and time for execution for another process using C#?
  • Floating-point number in Excel
  • View/Download Pdf Files in React - Router 4
  • SSH in Bash Script Messing Up File Read
  • Titanium doesn't recognize Android SDK on Windows
  • dismiss Progress Dialog in another Activity … Android
  • Yii2 Login with database
  • Submit a form with jQuery / Javascript without ignoring “required” tag
  • Granting permissions to Azure Active Directory Web Application automatically
  • Many to Many in Linq using Dapper
  • Backward compatibility of Python 3.5 for external modules
  • How to display the images in listview
  • How to validate a year I enter in textbox using jquery rule?
  • Laravel at least one field is required
  • LiveData is abstract android
  • Get the number 18437736874454810627
  • Is there a way to dynamically embed PDF Files in a JSP pulled from the file system?
  • Creating PDF from TIFF image using iText
  • Sensibility of combined Maven/Ant+Ivy build management for dual platform Desktop/Android deployment?
  • Validate child input components on submit with Vee-Validate and vue js 2
  • Does Mobilefirst provide a provision to access web services directly?
  • Textfile Structure (tables)
  • Play WS (2.2.1): post/put large request
  • java.lang.NoClassDefFoundError: com.parse.Parse$Configuration$Builder on below Lollipop versions
  • Deserializing XML into class C#
  • Is there a mandatory requirement to switch app.yaml?
  • Codeigniter doesn't let me update entry, because some fields must be unique
  • Can't mass-assign protected attributes when import data from csv file
  • Does armcc optimizes non-volatile variables with -O0?
  • How to Embed XSL into XML