2016-10-18 14 views
0

XPageで最初のjquery DataTableを実装しようとしていますが、基本的なHTMLバージョンでも初期化できません。XPageでjquery DataTableを実装する

ダウンロードしたファイルをパッケージエクスプローラのWebContentフォルダに追加しました。だから私は....

フォルダ内のWebContent - DataTables - 例/拡張子/メディアなど。

私は私のページ

`<xp:scriptBlock> 
<xp:this.value><![CDATA[ 
$(document).ready(function() 
{ 
$("#tableSimple").DataTable(); 
} 
); 
]]></xp:this.value> 
</xp:scriptBlock> 

そして、私が持っている上のスクリプトブロックを追加した

<resource> 
<content-type>application/x-javascript</content-type> 
<href>DataTables/media/js/jquery.dataTables.min.js</href> 
</resource> 
<resource> 
<content-type>text/css</content-type> 
<href>DataTables/extensions/FixedColumns/css/dataTables.fixedColumns.min.css</href> 
</resource> 
<resource> 
<content-type>text/css</content-type> 
<href>DataTables/extensions/FixedColumns/js/dataTables.fixedColumns.js</href> 
</resource> 
<resource> <content-type>text/css</content-type> 
<href>DataTables/media/css/jquery.dataTables.min.css</href> 
</resource> 

私が含まれるように他のすべてと正常に動作します私のアプリケーションのテーマを変更しています...... DataTable Webサイトのサンプルデータを使用しました。

<table id="tableSimple" class="display" width="100%" cellspacing="0"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Position</th> 
      <th>Office</th> 
      <th>Age</th> 
      <th>Start date</th> 
      <th>Salary</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <th>Name</th> 
      <th>Position</th> 
      <th>Office</th> 
      <th>Age</th> 
      <th>Start date</th> 
      <th>Salary</th> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr> 
      <td>Tiger Nixon</td> 
      <td>System Architect</td> 
      <td>Edinburgh</td> 
      <td>61</td> 
      <td>2011/04/25</td> 
      <td>$320,800</td> 
     </tr> 
     <tr> 
      <td>Garrett Winters</td> 
      <td>Accountant</td> 
      <td>Tokyo</td> 
      <td>63</td> 
      <td>2011/07/25</td> 
      <td>$170,750</td> 
     </tr>.....etc 

DataTableを読み込むことができません。私はOliver Busseのnsfを彼のブログから同じ主題で試してみたが、どちらもうまくいかない。

私は明らかに何かを見逃しています。私は初心者ですが、基本的な質問であれば申し訳ありませんが、私はこれで生きる意志を失っています!どんな助けもありがとう。

+0

おそらくAMDローダーの問題です。そのためにSOを探してください –

+0

こんにちはPer Henrik、あなたは私が上記のことが正しいかどうかを確認することができますか? –

+0

データセットがXPageで動作するようにするには、AMDローディングの問題を解決する必要があります –

答えて

0

これで機能しました。不幸にも私はどこに障害があるのか​​判断できません。私は以前にコピーされた要素をすべて削除し、関連するすべての要素をMichael Smithの例から自分のアプリケーションにコピーするだけで解決できました。

私はテーブルがであることに注意しましたが、それはしばらくの間わかりませんでした。

すべての提案に感謝します。

0

のように - グーグルAMDとのXPages、あなたが可能な解決策が表示されますか?あなたは、dataTables.jsの前にhtmlのheadでjQueryをリストアップする必要があります。あなたのページには何が掲載されていますか?

私は、多くのアプリケーションでは、この作業を持っていた、とここではHTMLのheadは、私はjQueryののdataTable(私は無関係な行を省略しました)が含まれてい1つのXPageのためである:テーマで

<script type="text/javascript" src="jquery-2.1.3.min.js"></script> 
<script type="text/javascript" src="dataTables/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> 

、私はそれを "webstandard"に設定してjQueryが最初であり、すべてCSSを持っていることを確認しています。

0

私は間違いないと思いますが、AMDの問題はすでにOliverのDBで修正されていると思いますか? (私は間違っている可能性があります)

Firebug/Developerツールを有効にすると、コンソールタブにエラーが表示されますか?または、ドミノログにエラーが表示されていませんか?

また、テーブルヘッダーは描画されるだけでコンテンツは表示されませんか、テーブルヘッダーが表示されませんか?

わずかに飛び出した唯一の点は、インストールに必要なリソースをコピーして貼り付けていたため、オリバーがインストールに使用したことです。このように、ファイル構造はわずかに異なりますので、bowerファイルパスを持つファイル/スクリプトへの参照があればチェックする価値がありますか?

ああ、あなたはリソース集約を使用していますか? CSSのいくつかは相対パスを使用しているため、これらを更新する必要があると思いますか?

テーブルを初期化していますか?

+0

Chrisと他の人に感謝します。私はここで事実上すべてを試しました。あなたの特定の質問に答えるために、私はAMDのスニペットなどを追加しました。はい、私はテーブルを取得します。私は今、私のサーバー上でうまく動作するMichael Smithのデモからのリソースをコピーする程度になってしまったが、まだそれはない。 CSSファイルを細かくしようとするとエラーが発生しますが、パスは正しいです!最も可能性が高いエラーは$(...)ですが、DataTableは関数エラーではありません。私は、問題がどこにあるのかと推測しています。 –

+0

CSSエラーを並べ替えて、.DataTable関数のエラーが表示されるだけで、疑わしいものがはっきりと表示されます。私はこの機能がどこにあるのか、なぜそれが壊れているのかを知ることでできます。 –

+0

この最終的な問題は、Steve Cochraneが述べたように聞こえます.JQueryスクリプトの後にDataTablesをロードする必要があります。また、jQueryを1回だけ含めるようにしてください。多分別のnsfからコピーした場合は、それを2回組み込んだ可能性がありますか? –