Adding DataTables plugin to Groovy Grails Tool Suite

StackOverflow https://stackoverflow.com/questions/16655943

  •  30-05-2022
  •  | 
  •  

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>
Was it helpful?

Solution

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:

  1. .js files in web-app/js
  2. .css files in web-app/css
  3. 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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top