2013-04-09 2 views
1

레일즈에서 저는 jquery-datatables-rails gem을 통해 부트 스트랩과 dataTables를 사용하고 있습니다. 그러나, 나는 단지 부트 스트랩 스타일의 절반을 얻는 것처럼 보입니다.jquery-datatables-rails 부트 스트랩 스타일링

gem 'jquery-datatables-rails', git: 'git://github.com/rweng/jquery-datatables-rails.git' 

는 application.js

//= require jquery 
    //= require jquery_ujs 
    //= require jquery.ui.core 
    //= require jquery.ui.datepicker 
    //= require twitter/bootstrap 
    //= require dataTables/jquery.dataTables 
    //= require dataTables/jquery.dataTables.bootstrap 
    //= require dataTables/extras/TableTools 
    //= require chosen-jquery 
    //= require best_in_place 
    //= require cocoon 
    //= require_tree . 

    $.extend($.fn.dataTableExt.oStdClasses, { 
     "sWrapper": "dataTables_wrapper form-inline" 
    }); 

application.css

*= require_self 
*= require jquery.ui.core 
*= require jquery.ui.datepicker 
*= require dataTables/jquery.dataTables.bootstrap 
*= require dataTables/extras/TableTools 
*= require dataTables/extras/TableTools_JUI 
*= require chosen 
*= require_tree . 
*/ 

특정 커피 스크립트

jQuery -> 
    $('#customers').dataTable 
    sDom: "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>" 
    sPaginationType: "bootstrap" 
    bjQueryUI: true 

ERB

스타일링은 DataTable의 사이트 http://www.datatables.net/media/blog/bootstrap/

주 헤더가 잘못과 줄무늬 보라색에 표시 아래가 아닌 것을 보여 아니다에

enter image description here

어떤 생각을 회색이다 그러나

<table id="customers" class="display" cellpadding="0" cellspacing="0" border="0" class="table table-bordered table-striped"> 
    <thead> 
    <tr> 
     <th>etc. 

내가 뭘 더해야 할까?

+0

나는 보석과 레일의 어떤 버전을 사용 했습니까? – andoke

+1

2013 년 6 월 현재 레일즈 3.2.x와 최신 부트 스트랩 및 데이터 테이블 보석을 사용하고 있습니다. 가장 중요한 것은 datatable css에 대한 모든 참조를 제거하는 것입니다 –

답변

1

이 모든 것이 자산 파이프 라인에 대한 나의 이해 부족으로 요약됩니다. 일단 내가 주변에 머리가있어 더 많은 것들이 잘 작동했다.

프리 컴파일과 압축 옵션을 가지고 놀아 보았 기 때문에 공공/자산 디렉토리에 내가 사용했던 다른 것을 무시하는 CSS 파일이 들어있는 것처럼 보였습니다.

일단 해당 디렉토리의 내용을 삭제하고 프로덕션에서 사전 컴파일을 수행하는 카피스트라 배포를 구성하면 모든 것이 잘 작동합니다.

자산 파이프 라인은 확실히 훌륭하지만 약간의주의가 필요합니다.

관련 문제