2016-08-03 47 views
0

には適用されません。テーブルには、データテーブルを使用してページ設定とソート機能がありますが、CSSは適用されていません。私はレール4.2を使用しています。DataTables CSSはテーブル

私は自分のCSSと画像ファイルをそれぞれベンダー/アセット/スタイルシートと画像に読み込んでいます。

私はスタイルシートにはあまり使用していません。私は、テーブルのデータがアヤックスとのDataTableによってロードされapplication.less

... 
@import "dataTables.bootstrap.css"; 
@import "jquery.dataTables.css"; 

でのDataTableのCSSをインポート はアヤックス成功に初期化されます。ここで

LeaderBoards.prototype.updateResults = function() { 
    var valuesToSubmit = $(this.form).serialize(); 
    var that = this; 
    $.ajax({ 
     url: $(this.form).attr('action'), 
     type: "GET", 
     data: valuesToSubmit, 
     dataType: "html" 
    }).success(function(response){ 
     that.resultBox.html(response); 
     $('#leaderboard-table-test').DataTable({ 
      searching: false, 
      "iDisplayLength": 3, 
      "bLengthChange": false 
     }); 
    }).error(function(){ 
     var text = I18n.t('leaderboards.index.no_results_found'); 
     that.resultBox.html('<div class="no-results-found">'+ text +'</div>'); 
    }); 
}; 

私がしようとしていますテーブルの例である:

<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> 
    </tbody> 
</table> 

私はテーブルがロードされた後、これに追加されているのDataTableクラスを見ることができます。 は、例えば、それはdivの内にラップされていますapplication.cssで

<div id="#table_id_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer"> 

、私は私のDataTableのCSSの輸入@import文を参照してください、それ自体CSSのDataTableが含まれていません。

+0

あなたのコンパイル済み 'main.css'にdatatablesコードがありますか? – Polyov

+0

@Polyovあなたのコメントを解決するためにいくつかの情報を追加しました。 – Kaitrono

+1

コードが 'application.css'に表示されない場合は、正しくインポートされていません。 ['@ import'文](http://sass-lang.com/guide)のいくつかの異なるパスや書式を試してみてください。 – Polyov

答えて

0

私は問題を見つけ出すことができました。 DataTablesのCSSファイルは、疑わしいものとして適切にインポートされていませんでした。そのトリックは、通常のCSSではなくファイルの数を少なくするように強制することでした。

インポートステートメントが@import (less) "jquery.dataTables.css";に変更され、正しく読み込まれました。
この結論に達するのを手伝ってくれたPolyovに感謝します。