Adding DataTables plugin to Groovy Grails Tool Suite

Question

I am trying to add DataTables to my Groovy/Grails project in order to clean up my tables and to add extra functionality.

I currently am having problems getting it to even work. I added the download folder to my project plugin folder but when I try to add the functionality to my project it doesn't seem to work, starting with just the cookey cutter example shown here. Since that's not working I must have a problem with how I added the add-on to my files. I thought it was as easy as just taking the download file and moving it to the project plugin folder but that doesn't seem to be working.

Any advice on how to actually add the files to the project? They show up in my project directory in groovy grails but they show up at doc.media. Where they show how to include the js and css to the html page it shows datatable/media... I am not sure if this is a path error or what not. I have never actually added an add-on to this tool suite before. It was always given to me.

If someone could give me a decent rundown on how to actually add things like this I would greatly appreciate it.

This is my show.gsp

<!doctype html>
<html>
<head>
<style type="text/css" title="currentStyle">
@import "/DataTables/media/css/demo_table.css";
</style>
<g:set var="entityName"
    value="${message(code: 'User.label', default: 'User')}" />
<meta name="layout" content="main">
<g:set var="entityName"
    value="${message(code: 'User.label', default: 'User')}" />
<title><g:message code="default.show.label" args="[entityName]" /></title>
<script>
    $(document).ready(function() {
        $('#table_id').dataTable();
    });
</script>


</head>
    <body>
    <table id="table_id" class ="display">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 Data 1</td>
                <td>Row 1 Data 2</td>
            </tr>
            <tr>
                <td>Row 2 Data 1</td>
                <td>Row 2 Data 2</td>
            </tr>
        </tbody>
    </table>

    </body>
    </html>

This is my main.gsp

<!doctype html>
    <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
    <!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
    <!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
    <!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]-->
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <title><g:layoutTitle default="Grails"/></title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon">
            <link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}">
            <link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}">
            <link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
            <link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
            <g:layoutHead/>
            <r:layoutResources />
        </head>
        <body>
            <div style ="font-weight:bold; font-size:20px" id="grailsLogo" role="banner"><a href="${createLink(uri: '/')}">Grails</a></div>
            <g:layoutBody/>
            <div class="footer" role="contentinfo"></div>
            <div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading&hellip;"/></div>
            <g:javascript library="application"/>
            <r:layoutResources />
        </body>
    </html>

Kelly · Accepted Answer · 2013-05-21 18:06:46Z

2

I think the term "plugin" is throwing you. This is not a Grails plugin - it is a jQuery plugin. Totally different. First of all make sure you have jQuery itself installed, active and working.

Your downloaded files will go in the following locations:

.js files in web-app/js
.css files in web-app/css
image files in web-app/images (I'm pretty sure this is where they will work based on looking at the css file)

Then to include them in a gsp page:

In conf/ApplicationResources.groovy

modules = {
    application {
        resource url:'js/application.js'
        resource url:'js/jquery.dataTables.min.js'
    }
}

In GSP

<head>
<link rel="stylesheet" href="${resource(dir:'css', file: 'demo_table.css')}" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>

<g:set var="entityName"
value="${message(code: 'User.label', default: 'User')}" />
<meta name="layout" content="main">
<g:set var="entityName"
  value="${message(code: 'User.label', default: 'User')}" />
<title><g:message code="default.show.label" args="[entityName]" /></title>
<script>
$(document).ready(function() {
    alert('I am working'); //remove once you see the alert
    $('#table_id').dataTable();
});
</script>
</head>
....

(this should give you an alert when the page is loaded, just as a check to make sure jQuery is working. After you see the alert once you can remove that alert line)

I included jQuery the way I use it; gets it from a CDN so I can keep up to date.

And then follow the rest of the example on the demo page you listed.

edited May 21, 2013 at 18:06

answered May 20, 2013 at 19:27

Kelly

3,7094 gold badges22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

CoffeePeddlerIntern Over a year ago

I was thinking going this route and became confused with the fact it is a "pluggin" Been trying to jump through hoops with groovy grails pluggin manager and installer and its been a pain! I will try this route and get back to you. Thanks for the response!

CoffeePeddlerIntern Over a year ago

I get a HTTP Status 500. Error applying layout : main. Which is coming from <meta name="layout" content="main"> in my head. Which gives me my styling which was default from grails. When i remove that line everything goes black and white but the datatables still does now work

Kelly Over a year ago

Can you update the question to include your main.gsp layout and the head section from your other gsp? And I'm a little confused on the wording - with no main layout included do the datatables work?

Kelly Over a year ago

First try adding the CSS and javascript imports and testing jQuery to make sure it is installed and working. I'll update my answer to show this.

Kelly Over a year ago

OK, I just played around with this a little more and I could reproduce that error. It appears that the Resources plugin does not like the javascript set in the gsp. Weird. I'll update my answer to exactly what I did to get it to work, formatting, pagination and all.

|

Collectives™ on Stack Overflow

Adding DataTables plugin to Groovy Grails Tool Suite

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related