將DataTables插件添加到Groovy Grails工具套件

我正在嘗試將DataTables添加到我的Groovy/Grails項目中，以清理我的表格並添加額外的功能。將DataTables插件添加到Groovy Grails工具套件

我目前遇到問題甚至無法正常工作。我將下載文件夾添加到了我的項目插件文件夾中，但是當我嘗試將該功能添加到我的項目時，它似乎不起作用，從示例here顯示的cookey cutter示例開始。由於這不起作用，我必須在將附加項添加到我的文件時遇到問題。我認爲這很簡單，只需下載文件並將其移動到項目插件文件夾，但似乎沒有工作。

有關如何將文件實際添加到項目的任何建議？他們在我的項目目錄中出現在groovy grails中，但他們顯示在doc.media。在那裏他們展示瞭如何將js和css加入到html頁面，它顯示了數據表/媒體......我不確定這是一個路徑錯誤還是不是。我從來沒有在這個工具套件中添加過附加組件。它總是給我。

如果有人可以給我一個體面的破壞如何實際添加這樣的事情，我將不勝感激。

這是我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>

這是我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>

來源

2013-05-20 CoffeePeddlerIntern

我認爲術語「插件」是你扔。這不是一個Grails插件 - 它是一個jQuery插件。完全不同。首先確保你已經安裝了jQuery，並且工作正常。

您下載的文件會在以下位置：

.js文件中web-app/js
.css文件中web-app/css
圖像文件web-app/images（我敢肯定，這是他們將基於查看該css文件）

然後將它們包含在gsp頁面中：

在conf/ApplicationResources.groovy

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

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

（當加載頁面時，只是作爲一種檢查，以確保jQuery是工作這應該給你一個警告。當你看到警報後，你可以刪除alert行）

我包括jQuery的方式，我用它;從CDN獲取它，以便保持最新狀態。

然後按照您列出的演示頁面上的示例的其餘部分。

來源

2013-05-20 19:27:46 Kelly

我正在考慮走這條路線，並與它是一個「插件」的事實混淆一直試圖跳過Groovy Grails插件管理器和安裝程序的箍，它是一個痛苦！我會嘗試這條路線並回復你。感謝您的迴應！ – CoffeePeddlerIntern

我得到一個HTTP狀態500.錯誤應用佈局：主。這是來自在我腦海中。這給了我我從Grails默認的樣式。當我刪除該行時，一切都變黑白，但數據表仍然可以工作 – CoffeePeddlerIntern

您是否可以更新問題以包含您的'main.gsp'佈局和來自其他gsp的頭部？對於措辭有點困惑 - 數據表不包含主要佈局？ – Kelly

將DataTables插件添加到Groovy Grails工具套件

回答

相關問題