Добавление подключаемого модуля DataTables в Groovy Grails Tool Suite

Я пытаюсь добавить DataTables в свой проект Groovy/Grails, чтобы очистить свои таблицы и добавить дополнительные функции.

В настоящее время у меня проблемы с тем, чтобы заставить его работать. Я добавил папку загрузки в папку плагинов моего проекта, но когда я пытаюсь добавить функциональность в свой проект, похоже, что она не работает, начиная с показанного примера файла cookie здесь. Поскольку это не работает, у меня должна быть проблема с тем, как я добавил надстройку в свои файлы. Я думал, что это так же просто, как просто взять файл загрузки и переместить его в папку плагинов проекта, но, похоже, это не работает.

Любые советы о том, как на самом деле добавить файлы в проект? Они отображаются в моем каталоге проектов в Groovy Grails, но они появляются в doc.media. Там, где они показывают, как включить js и css на страницу html, он показывает datatable/media... Я не уверен, что это ошибка пути или что-то еще. На самом деле я никогда раньше не добавлял дополнение к этому набору инструментов. Мне всегда давали.

Если бы кто-то мог дать мне приличное изложение того, как на самом деле добавить такие вещи, я был бы очень признателен.

Это мое шоу.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>

Это мой 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>

person CoffeePeddlerIntern    schedule 20.05.2013    source источник


Ответы (1)


Я думаю, что термин «плагин» вас бросает. Это не плагин Grails — это плагин jQuery. Абсолютно другой. Прежде всего убедитесь, что у вас установлен, активен и работает сам jQuery.

Ваши загруженные файлы будут находиться в следующих местах:

  1. .js файлы в web-app/js
  2. файлы .css в web-app/css
  3. файлы изображений в web-app/images (я почти уверен, что именно здесь они будут работать, основываясь на файле css)

Затем, чтобы включить их на страницу gsp:

In conf/ApplicationResources.groovy

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

В ВСП

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

(это должно дать вам предупреждение при загрузке страницы, так же, как проверка, чтобы убедиться, что jQuery работает. После того, как вы увидите предупреждение, вы можете удалить эту строку alert)

Я включил jQuery так, как я его использую; получает его из CDN, чтобы я мог быть в курсе.

А затем следуйте оставшейся части примера на демонстрационной странице, которую вы указали.

person Kelly    schedule 20.05.2013
comment
Я думал, что пойду по этому пути, и меня смутил тот факт, что это плагин. Я пытался прыгнуть через обручи с заводным менеджером плагинов Grails и установщиком, и это было больно! Я попробую этот маршрут и вернусь к вам. Спасибо за ответ! - person CoffeePeddlerIntern; 20.05.2013
comment
Я получаю статус HTTP 500. Ошибка применения макета: main. Что исходит из ‹meta name=layout content=main› в моей голове. Что дает мне мой стиль, который был по умолчанию от Grails. Когда я удаляю эту строку, все становится черно-белым, но таблицы данных все еще работают. - person CoffeePeddlerIntern; 20.05.2013
comment
Можете ли вы обновить вопрос, включив в него макет main.gsp и заголовок из другого вашего gsp? И я немного запутался в формулировке - без основного макета работают ли таблицы данных? - person Kelly; 21.05.2013
comment
Вот мое обновление. Файл main.gsp был просто стандартным, который сделал для меня Grails. Спасибо за помощь. Я очень ценю это. - person CoffeePeddlerIntern; 21.05.2013
comment
Сначала попробуйте добавить импорт CSS и javascript и протестировать jQuery, чтобы убедиться, что он установлен и работает. Я обновлю свой ответ, чтобы показать это. - person Kelly; 21.05.2013
comment
Извините, мне потребовалось некоторое время, чтобы вернуться. Я все еще получаю ошибку 500, которую я получил раньше - person CoffeePeddlerIntern; 21.05.2013
comment
Хорошо, я получаю предупреждение, когда использую Firefox, но он просто показывает неформатированную таблицу на белой странице. И это работает только тогда, когда я убираю метастроку - person CoffeePeddlerIntern; 21.05.2013
comment
stackoverflow.com/questions/13733133/ это привело к формат. Но разбиение на страницы не работает, и каждый раз при загрузке этой страницы выдает ошибку. - person CoffeePeddlerIntern; 21.05.2013
comment
Хорошо, я просто еще немного поиграл с этим и смог воспроизвести эту ошибку. Похоже, плагину Resources не нравится набор javascript в файле gsp. Странный. Я обновлю свой ответ до того, что я сделал, чтобы заставить его работать, форматирование, нумерация страниц и все такое. - person Kelly; 21.05.2013
comment
Большое спасибо за помощь. Я смог запустить базовую таблицу, но теперь я не могу заставить ее работать с моей реальной таблицей. Но я думаю, что я могу взять его отсюда. Я очень ценю ваше время и помощь! - person CoffeePeddlerIntern; 22.05.2013