How to import jQuery DataTables into Grails 2.4.4

Question

I have a Grails 2.4.4 app and am trying to implement a GSP that leverages a jQuery DataTable. I see there is an old DataTable plugin but it looks unmaintained and incompatible with Grails 2.x. Not to mention, there ought to be a way to simply include any JS lib in Grails without explicitly requiring a plugin for it.

Here's the plugins section of my BuildConfig:

plugins {
    build ":release:3.0.1"
    build ":tomcat:7.0.52.1"

    compile "org.grails.plugins:gson:1.1.4"
    compile ":rest-client-builder:1.0.3"
    compile ":yammer-metrics:3.0.1-2"

    runtime ":jquery:1.11.1"
    runtime ":cached-resources:1.0"
    runtime ":resources:1.2.14"
    compile ":cache-headers:1.1.7"

    compile ":rest-client-builder:1.0.3"
    compile ":export:1.6"
    compile ":standalone:1.2.3"
    compile ":cache-headers:1.1.7"
    compile ":scaffolding:2.1.2"
    compile ':cache:1.1.3'

    runtime ":resources:1.2.14"
    runtime ":hibernate:3.6.10.15"
    runtime ":database-migration:1.4.0"
    runtime ":jquery:1.11.1"
}

For reasons outside the scope of this quesiton, I can't remove or change any existing declarations in the plugins section, but I can add to them. I've heard that something called the "assets pipeline" is the new cool way of adding JS libs to a Grails app, but all the literature I can find on this pipeline is vague and high-level. And I can't find any real world concrete examples of using this pipeline to include DataTables in a Grails app.

The "Hello World!" version of a DataTable seems to be this:

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
        </tr>

        ...lots of more rows
    </tbody>
</table>

$(document).ready(function() {
    $('#example').DataTable();
} );

So I ask: How go I get the (above) "Hello World" DataTable running inside a GSP? What specific configs, plugins, etc. do I need to wire up to make this work?

Answer 1

if your DataTable js files are saved in this directory web-app\js, you can use this Grails tag in your view where you need a DataTable.

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

Similarly, you can get your required css file as such

<g:external dir="css" file="jquery.datatables.css" />

once those the required files are loaded, you can call the jQuery function

<g:javascript>
    $(document).ready(function() {
        $('#example').DataTable();
    } );
</g:javascript>