Dandelion-Datatables integration with Grails

"Dandelion-DataTables is a component of the free and Open Source web framework Dandelion. It allows you to quickly create full-featured HTML table based on the amazing DataTables jQuery plugin."
It provides two ways to use the library : JSP taglib or Thymeleaf dialect.


"Grails is an Open Source, full stack, web application framework for the JVM. It takes advantage of the Groovy programming language and convention over configuration to provide a productive and stream-lined development experience."
Grails works both with GSP (Groovy Server Page) and JSP.


In order to use Dandelion-DataTables, let's follow the installation guide for JSP
Few hints :

• Grails works with servlet 2.5 by default so we must declare it in web.xml
• When working with domain object scaffolding, object list returned is named domainClassInstanceList, ie if domain object class is Animal then object list will be name animalInstanceList
• Dandelion-Datatables still does not support i18n based on ResourceBundle but it will come in the upcoming v0.9.0
• Grails offers a server-side paginate mechanism with g:paginate GSP taglib whereas Dandelion-Datatables has a JavaScript client-side paginate mechanism by default and an Ajax JavaScript server-side mechanism

Step 0 : Create simple grails application

If you do not have an existing application, you can get the sample from Github or create a new one with the following Grails commands :

grails create-app DandelionDatatablesWithGrails
grails create-domain-class com.jdourd.datatables.grails.Animal
grails create-controller com.jdourd.datatables.grails.Animal

Let's add some fields to Animal class :

class Animal {
 String name
 String species
 Date birthDate
}

And enable scaffolding in AnimalController :

class AnimalController {
 static scaffold = true
}

With scaffolding, the actions and views will be auto-generated at runtime. Since we will modify the list view, let's ask Grails to generate default ones :

grails generate-views com.jdourd.datatables.grails.Animal

Step 1 : Install the Dandelion-DataTables JARs

In grails-app/conf/BuildConfig.groovy configuration file, add the following dependencies :

dependencies {
  compile 'com.github.dandelion:datatables-jsp:0.8.14'
  compile 'com.github.dandelion:datatables-servlet2:0.8.14'
}

Step 2 : Add the Dandelion-DataTables servlet and filter definitions

Grails hide web.xml configuration file. In order to modify it, execute the following grails command which will copy the templates used by Grails during code generation to your project directory :

grails install-templates

In src/templates/war/web.xml template file, add the following configuration :

<!-- Dandelion-Datatables servlet definition -->
<servlet>
    <servlet-name>datatablesController</servlet-name>
    <servlet-class>com.github.dandelion.datatables.extras.servlet2.servlet.DatatablesServlet</servlet-class>
</servlet>

<!-- Dandelion-Datatables servlet mapping -->
<servlet-mapping>
    <servlet-name>datatablesController</servlet-name>
    <url-pattern>/datatablesController/*</url-pattern>
</servlet-mapping>

<!-- Dandelion-Datatables filter definition (used for export) -->
<filter>
    <filter-name>datatablesFilter</filter-name>
    <filter-class>com.github.dandelion.datatables.extras.servlet2.filter.DatatablesFilter</filter-class>
</filter>

<!-- Dandelion-Datatables filter mapping -->
<filter-mapping>
    <filter-name>datatablesFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

Step 3 : Declare the taglib definition

In the GSP (grails-app/views/animal/list.gsp in the example), declare Dandelion-DataTables taglib :

<%@ taglib prefix="datatables" uri="http://github.com/dandelion/datatables" %>

Step 4 : Include client-side dependencies

By default, the Javascript libraries are not embedded in Dandelion-DataTables. So ensure you declared somewhere in your pages those script and link tags :

<!-- DataTables -->
<link href="pathToCss/jquery.dataTables.css" rel="stylesheet">
<script src="pathToJs/jquery.dataTables.min.js"></script> 

<!-- jQuery -->
<script src="pathToJs/jquery-1.8.3.min.js"></script>

Step 5 : Use taglib in the view

Grails generated view use the following code to display domain object instances :

<table>
 <thead>
  <tr>
   <g:sortableColumn property="birthDate" title="${message(code: 'animal.birthDate.label', default: 'Birth Date')}" />
   <g:sortableColumn property="name" title="${message(code: 'animal.name.label', default: 'Name')}" />
   <g:sortableColumn property="species" title="${message(code: 'animal.species.label', default: 'Species')}" />
  </tr>
 </thead>
 <tbody>
 <g:each in="${animalInstanceList}" status="i" var="animalInstance">
  <tr class="${(i % 2) == 0 ? 'even' : 'odd'}">
   <td><g:link action="show" id="${animalInstance.id}">${fieldValue(bean: animalInstance, field: "birthDate")}</g:link></td>
   <td>${fieldValue(bean: animalInstance, field: "name")}</td>
   <td>${fieldValue(bean: animalInstance, field: "species")}</td>
  </tr>
 </g:each>
 </tbody>
</table>

Let's replace this code using the Dandelion-Datatables' taglib !

<datatables:table id="animalTable" data="${animalInstanceList}" row="animal">
 <datatables:column title="Name">
  <g:if test="${animal}">
   <g:link action="show" id="${animal.id}">${animal.name}</g:link>
  </g:if>
 </datatables:column>
 <datatables:column title="Species" property="species" />
 <datatables:column title="BirthDate" property="birthDate" />
</datatables:table>

And that's all :)
Have fun with Dandelion-Datatables and Grails !