How to Add DataTables Plugin in Grails

DataTables is an awesome plugin for the JQuery. It provides many features as filter and sort without you have to code them at all. In this post I'll show you the easiest way to use the DataTables plugin in Grails.

First, install the jquery-datatables plugin on your project:

grails install-plugin jquery-datatables

After, download the most reticently  DataTables package and copy the following files to your web-app project folder:

css/jquery.dataTables.css
images/*
js/jquery.dataTables.js

On the views/layouts/main.gsp file, add the following lines:

Within the head tag:

<link rel='stylesheet' href="${resource(dir: 'css', file: 'jquery.dataTables.css')}" type="text/css"/> 

<g:javascript>
   $(document).ready(function() {
      $("#dataTablesList").dataTable();
   });
</g:javascript>

Before the </body> tag:

<g:javascript library="datatables" src="jquery.dataTables.js"/>

Finally, add the dataTablesList id on the table tag of your list.gpg file:

<table id="dataTablesList">

If everything goes fine, your default list view will be able as a DataTables component and so, you will have something like that:

http://www.datatables.net/release-datatables/examples/basic_init/zero_config.html

Note that both, Grails default list and DataTables plugin have a pagination feature. So, maybe you will want to disable the Grails pagination to let the DataTables do its job by itself. For that, you can pass the counting item number of your domainClass as the max item list value in your action list (on the Controller):

params.max = Math.max(max ?: <your class>.count(), 1)

Remember that this is just a simple example of how to use the DataTables plugin in Grails by getting data directly from DOM. After that, you can do your own customization.

Maybe you want to see:

- DataTables examples page;
- Using jQuery DataTables In Grails (with JSON).