Monday, November 26, 2012

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).

5 comments:

  1. Nice post, and thanks for linking to my blog. ;-) Other JavaScript grids I've used are jqGrid and SlickGrid. I mostly use SlickGrid now because it performs so well with large amounts of data!

    ReplyDelete
    Replies
    1. Thank you for the tips, I'll look for the SlickGrid!

      Delete
  2. can any one tell me i have a table . i need to display the content in table as today date.
    and one week like this

    ReplyDelete
  3. can any one help me i have a table, i need to search the content but am getting full table in data table, can i customize the data table

    ReplyDelete