DataTables doesn't work with Rails 4 and Ruby 2.

datatables_angry.rb

# UPDATE: This is working now, thanks to @mamaduka:

# In home.js.coffee I had "bjQueryUI" instead of "bJQueryUI" ... D'oh!







# I've followed the RailsCasts tutorial exactly - http://railscasts.com/episodes/340-datatables

# JS functions (sorting, etc.) all work fine, but the table isn't
# styled with the jquery.ui.theme (smoothness is supposed to be default)

# All files are loaded properly, no errors in browser, console, or log.

# Instead of the theme, I see this: http://s.mlkshk.com/r/X2LO

# Gemfile
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'jquery-datatables-rails', github: 'rweng/jquery-datatables-rails' 
gem 'turbolinks'

# home_controller.rb
def index
  @broadcasts = Broadcast.all.order(:title)
end


# home.js.coffee
jQuery ->
	$('#broadcasts').dataTable
		sPaginationType: "full_numbers"
		bjQueryUI: true

# application.css
/*
 *= require_self
 *= require jquery.ui.core
 *= require jquery.ui.theme
 *= require dataTables/src/demo_table_jui
 *= require_tree .
 */

# application.js
//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require turbolinks
//= require_tree .

# index.html.erb
<h1>Home</h1>

<table id="broadcasts" class="display">
	<thead>
		<tr>
			<th>Title</th>
			<th>Slug</th>
			<th>Created Date</th>
		</tr>
	</thead>
	<tbody>
		<% @broadcasts.each do |broadcast| %>
			<tr>
				<td><%= broadcast.title %></td>
				<td><%= broadcast.slug %></td>
				<td><%= broadcast.created_at.strftime("%B %e, %Y") %></td>
			</tr>
		<% end %>
	</tbody>
</table>

# The source of the rendered page, again, all files load properly:

<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.ui.core.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.ui.theme.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/dataTables/src/demo_table_jui.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/home.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/dataTables/jquery.dataTables.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/home.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>

Your css is wrong. According to the github readme for jquery-datatables-rails, it should be

*= require dataTables/jquery.dataTables

instead of your

 *= require dataTables/src/demo_table_jui

Stylesheets in the asset pipeline can be unintuitive, at best. You might need to add

@import 'jquery-ui';

or something like that at the top of application.css after the comments.

I wasn't using Rails 4. I was also using Foundation in case that makes a difference.

@ericdfields - Actually, that's not true when trying to implement a theme. See @rbates' tutorial.

@mmaa - That didn't do anything except cause a 404 in the logs.