jquery-datatables-rails bootstrap styling

Question

In rails I am using bootstrap and dataTables via the jquery-datatables-rails gem. However, I only seem to get half the bootstrap styling.

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 .
 */

specific coffee script

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

erb

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

However the styling is the one shown below and not that shown on the dataTable site http://www.datatables.net/media/blog/bootstrap/

Note the header is wrong and the stripes are purple not grey

enter image description here

Any thoughts on what else I need to do?

i am looking to do the same thing, which version of gems and rails did you used ? — andoke
– andoke, Commented Jun 11, 2013 at 10:50
I am using rails 3.2.x and the latest bootstrap and datatable gems as of June 2013. Main thing is remove all references to the datatable css — Michael Moulsdale
– Michael Moulsdale, Commented Jun 16, 2013 at 6:34

Michael Moulsdale · Accepted Answer · 2013-04-16 07:58:27Z

1

This all boiled down to my lack of understanding of the assets pipeline. Once I got my head around that more things worked well.

It seemed that I had played around with the precompile and compress options in development and so the public/assets directory had css files in that were overiding anything else I used.

Once I deleted the contents of that directory and configured my capistrano deployment to do a precompile on production everything worked well.

The asset pipeline is certainly excellent, but needs some care.

answered Apr 16, 2013 at 7:58

Michael Moulsdale

1,48815 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery-datatables-rails bootstrap styling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related