2016-08-03 2 views
0

에 적용되지 않았습니다. 테이블에 데이터 테이블을 통한 페이지 매김 및 정렬 기능이 있지만 CSS가 적용되지 않습니다. 레일 4.2를 사용하고 있습니다.DataTables CSS가 테이블

저는 모든 CSS 및 이미지 파일을 각각 공급 업체/자산/스타일 시트 및 이미지에로드했습니다.

스타일 시트를 적게 사용하고 있습니다. 나는 application.less

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

테이블 데이터가 아약스의 성공에 초기화 아약스와 datatables에 의해로드에서 datatables의 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> 

내가 datatables 클래스는 테이블이로드 된 후이 추가되는 것을 볼 수 있습니다. application.css에서

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

, 내 datatables CSS의 수입에 대한 @import 문을 볼 수 있지만 그 자체 CSS상의 datatables은 포함되어 있지 않습니다 : 예를 들어 , 사업부 내부에 싸여있다.

+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에게 감사의 말을 전합니다.

관련 문제