Last active
August 29, 2015 13:55
-
-
Save dan/8785462 to your computer and use it in GitHub Desktop.
DataTables doesn't work with Rails 4 and Ruby 2.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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> |
@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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I wasn't using Rails 4. I was also using Foundation in case that makes a difference.