2016-05-06 11 views
0

こんにちは、私はちょうど私のレールアプリでstupid-table-pluginを使用しようとしました。アプリケーションでstupid-table-pluginを設定する方法は?

http://joequery.github.io/Stupid-Table-Plugin/

だから、私は最初のサイト上からZipファイルをダウンロードしました。私はここにbasic.html "

でテストしようとしていたいくつかの例のうち

は、私が試したものですし、それが機能していません。

  1. 私は私のレールの上にそれを置くために「basic.html.erb」から「basic.html」を変更するにはフォルダを表示する(また、このためのルートを作った)

  2. ダウンロードしたファイルから、私が収集しましたすべてのJavaScript関連ファイルと「/app/assets/javascripts',(stupitable.js、stupitable.min.jsの下にそれを置く)

が、それは動作しません。

basic.html.erbこの

<!DOCTYPE html> 
<html> 
<head> 
    <title>Stupid jQuery table sort</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="stupidtable.js?dev"></script> 
    <script> 
    $(function(){ 
     $("#simpleTable").stupidtable(); 
    }); 
    </script> 
    <style type="text/css"> 
    table { 
     border-collapse: collapse; 
    } 
    th, td { 
     padding: 5px 10px; 
     border: 1px solid #999; 
    } 
    th { 
     background-color: #eee; 
    } 
    th[data-sort]{ 
     cursor:pointer; 
    } 
    tr.awesome{ 
     color: red; 
    } 
    </style> 
    </style> 
</head> 

<body> 

    <h1>Stupid jQuery table sort!</h1> 

    <p>This example shows how a sortable table can be implemented with very little configuration. Simply specify the data type on a <code>&lt;th&gt;</code> element using the <code>data-sort</code> attribute, and the plugin handles the rest.</p> 

    <table id="simpletable"> 
    <thead> 
     <tr> 
     <th data-sort="int">int</th> 
     <th data-sort="float">float</th> 
     <th data-sort="string">string</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>15</td> 
     <td>-.18</td> 
     <td>banana</td> 
     </tr> 
     <tr class="awesome"> 
     <td>95</td> 
     <td>36</td> 
     <td>coke</td> 
     </tr> 
     <tr> 
     <td>2</td> 
     <td>-152.5</td> 
     <td>apple</td> 
     </tr> 
     <tr> 
     <td>-53</td> 
     <td>88.5</td> 
     <td>zebra</td> 
     </tr> 
     <tr> 
     <td>195</td> 
     <td>-858</td> 
     <td>orange</td> 
     </tr> 
    </tbody> 
    </table> 

</body> 
</html> 

と私のコンソール

の私のエラーのように見えますが、リソースの読み込みに失敗しました:サーバーは、404の状態(見つかりません) 基本と答えた:38 未知の型エラー:$(...)。stupidtableは関数ではありません

私のJavaScriptファイルに問題があると感じますが、設定方法はわかりません。

ありがとうございました!助けてください

答えて

0

$( "#simpleTable")stupidtable(); は $( "#simpletable")にする必要があります。stupidtable();

+0

ありがとうございます。私はあなたの提案を試みたが、それでも動作しません。 「リソースを読み込めませんでした:サーバが404(見つからない)http:// localhost:3000/stupidtable.js?dev」のステータスで応答しました。私は私の

+0

これで、このソース行を手動で追加していますか? '/stupidtable.js?dev' '// = require_tree'を追加する必要があります。あなたのapplication.jsで(それは資産フォルダのすべてのjavascriptを読み込みます。 –

関連する問題