Quick Start

You can easily add a table to your GSP with these three steps:

1. Installation

Add the following line to the dependencies block of your BuildConfig.groovy file:

dependencies {
    compile "org.grails.plugins:grails-datatables:0.14"
}

grails.plugin.springsecurity.controllerAnnotations.staticRules=[
   "/dataTables/getData/**":     ["permitAll"],
   "/dataTables/getReport/**":   ["permitAll"]
]

2. Add the necessary JavaScript and CSS Assets

Add the following asset pipeline tags to the head of your gsp:

<asset:stylesheet src="grails-datatables.css"/>
<asset:stylesheet src="grails-datatables-plain.css"/>
<asset:javascript src="grails-datatables.js"/>

Alternatively, if you wish to style your table using JQueryUI, you can use the following list of assets instead:

<asset:stylesheet src="grails-datatables.css"/>
<asset:stylesheet src="grails-datatables-jqueryui.css"/>
<asset:javascript src="grails-datatables.js"/>
<asset:javascript src="grails-datatables-jqueryui.js"/>

Note: if you are using jQueryUI styling, you must also set the grails.plugin.datatables.jQueryUI configuration option to true.

3. Create a Table

To add a table to your GSP, just use the datatables taglib.

For example, if you have a domain class like this:

#!groovy
package datatablestest

class Book {
    String title
    Date releaseDate
}

<dt:datatable name="MyBooksTable" domainClass="datatablestest.Book" serverSide="true">
    <dt:column name="title"/>
    <dt:column name="releaseDate"/>
</dt:datatable>
<asset:deferredScripts/>

Note that the <asset:deferredScripts/> tag only needs to be included once in the page, somewhere after the last table.

Result With Plain Styling

If you selected the plain styling above, your table will look like this:

Result With JQueryUI Styling

If you selected the JQueryUI styling above, your table will look like this:

You can of course apply your own JQueryUI theme to further customize the appearance.

There are many options for styling a table. The GrailsDataTables plugin includes the assets for JQueryUI styling, but you can choose any method you wish. Read more about them at datatables.net.

Further Information

This example uses server-side processing to get the data into the table. There are several ways to populate your table with data, and you can read about them on the Table Types page.

There are many other ways to customize your table, which you can read about on the Options page, but it really is that easy to get started.

Back to Home.