Wiki

Clone wiki

grails-datatables / Quick Start

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

Note: if you are using Spring Security, you may need to add these two static rules in your Config.groovy file to allow access to the dataTables controller actions:

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:

package datatablestest

class Book {
    String title
    Date releaseDate
}

You can list your books in a table by putting this into your GSP:

<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:

plain.png

Result With JQueryUI Styling

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

jqueryui.png

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.

Updated