jquery-datatables-rails
jquery-datatables-rails copied to clipboard
rweng
Doesn't load the proper css, only loads something after I search
The plugin doesn't seem to be working for me... I followed the instructions
I basically load my page. I see a wrong formatting. If I type something in the search bar, then the pagination appears and sticks. It seems the table is not rightly loaded at first? and it looks like the formatting is stick very weird? (see the arrows being partly blank)
See screenshots:
Here is my code:
jQuery ->
$('#example').DataTable({
});
My application.css.scss:
//= require ./bootstrap
//= require rails_bootstrap_forms
//= require font-awesome
//= require ./custom
//= require_tree .
//= require_self
// https://github.com/werein/x-editable-rails
//= require editable/bootstrap-editable
// require editable/inputs-ext/bootstrap-wysihtml5
// require editable/inputs-ext/wysiwyg-color
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap.scss
// require dataTables/jquery.dataTables
My application.js
//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require jquery.turbolinks
//= require turbolinks
//= require_tree .
//= require zeroclipboard
//= require editable/bootstrap-editable
// require editable/inputs-ext/wysihtml5
// require editable/inputs-ext/bootstrap-wysihtml5
// require editable/inputs-ext/wysihtml5-editable
//= require editable/rails
Turbolinks.enableProgressBar();
And my Gemfile
source "https://rubygems.org"
gem 'activeadmin', github: 'activeadmin'
gem "activerecord-import", ">= 0.4.0"
gem "active_type", ">= 0.3.2"
gem "autoprefixer-rails", ">= 5.0.0.1"
gem "bcrypt", "~> 3.1.7"
gem "bootstrap_form", "~> 2.3.0"
gem 'bootstrap-sass', '~> 3.3.5'
gem 'charlock_holmes', '~> 0.7.3'
gem 'coderay'
gem "coffee-rails", "~> 4.1.0"
gem 'delayed_job_active_record'
gem 'devise'
gem "dotenv-rails", ">= 2.0.0"
gem "font-awesome-rails"
gem "faker"
gem "jquery-rails"
gem "jquery-turbolinks"
gem 'jquery-datatables-rails', '~> 3.3.0'
gem "mail", ">= 2.6.3"
gem "marco-polo"
gem "pg", "~> 0.18"
gem "pg_search"
gem "rails", "4.2.4"
gem 'resque', "~> 1.22.0", :require => "resque/server"
gem 'roo', '~> 2.1.0'
gem 'sass-rails', '>= 3.2'
gem "secure_headers", ">= 2.1.0"
gem 'smarter_csv'
gem 'simple_form'
gem "sidekiq"
gem "sinatra", ">= 1.3.0", :require => false
gem "turbolinks", ">= 2.5.2"
gem 'x-editable-rails'
gem 'zeroclipboard-rails'
gem 'will_paginate', '~> 3.0.6'
group :production, :staging do
gem "unicorn"
end
group :development do
gem "annotate", ">= 2.5.0"
gem "awesome_print"
gem "better_errors"
gem "binding_of_caller"
gem "byebug"
gem "letter_opener"
gem "quiet_assets"
gem "rack-livereload"
gem "spring"
gem "xray-rails", ">= 0.1.16"
end
group :development do
gem "airbrussh", :require => false
gem "brakeman", :require => false
gem "bundler-audit", :require => false
gem "capistrano", "~> 3.4.0", :require => false
gem "capistrano-bundler", :require => false
gem "capistrano-mb", ">= 0.22.2", :require => false
gem "capistrano-rails", :require => false
gem "guard", ">= 2.2.2", :require => false
gem "guard-livereload", :require => false
gem "guard-minitest", :require => false
gem "rb-fsevent", :require => false
gem "simplecov", :require => false
gem "sshkit", "~> 1.7.1", :require => false
gem "terminal-notifier-guard", :require => false
gem "thin", :require => false
end
group :test do
gem "capybara"
gem "connection_pool"
gem "launchy"
gem "minitest-reporters"
gem "mocha"
gem "poltergeist"
gem "shoulda"
gem "test_after_commit"
end
and the html..
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>1562</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
<td>6224</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Airi</td>
<td>Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
<td>5407</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Brielle</td>
<td>Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
<td>4804</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Herrod</td>
<td>Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
<td>9608</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Rhona</td>
<td>Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
<td>6200</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Colleen</td>
<td>Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
<td>2360</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Sonya</td>
<td>Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
<td>1667</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Jena</td>
<td>Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
<td>3814</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Quinn</td>
<td>Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
<td>9497</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Charde</td>
<td>Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
<td>6741</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Haley</td>
<td>Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
<td>3597</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Tatyana</td>
<td>Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
<td>1965</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Michael</td>
<td>Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
<td>1581</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Paul</td>
<td>Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
<td>3059</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Gloria</td>
<td>Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
<td>1721</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Bradley</td>
<td>Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
<td>2558</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Dai</td>
<td>Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
<td>2290</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Jenette</td>
<td>Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
<td>1937</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Yuri</td>
<td>Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
<td>6154</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Caesar</td>
<td>Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
<td>8330</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Doris</td>
<td>Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
<td>3023</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Angelica</td>
<td>Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
<td>5797</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Gavin</td>
<td>Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
<td>8822</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Jennifer</td>
<td>Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
<td>9239</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Brenden</td>
<td>Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
<td>1314</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Fiona</td>
<td>Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
<td>2947</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Shou</td>
<td>Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
<td>8899</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Michelle</td>
<td>House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
<td>2769</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Suki</td>
<td>Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
<td>6832</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Prescott</td>
<td>Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
<td>3606</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Gavin</td>
<td>Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
<td>2860</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Martena</td>
<td>Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
<td>8240</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Unity</td>
<td>Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
<td>5384</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Howard</td>
<td>Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
<td>7031</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Hope</td>
<td>Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
<td>6318</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Vivian</td>
<td>Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
<td>9422</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Timothy</td>
<td>Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
<td>7580</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Jackson</td>
<td>Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
<td>1042</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Olivia</td>
<td>Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
<td>2120</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Bruno</td>
<td>Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
<td>6222</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Sakura</td>
<td>Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
<td>9383</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Thor</td>
<td>Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
<td>8327</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Finn</td>
<td>Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
<td>2927</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Serge</td>
<td>Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
<td>8352</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Zenaida</td>
<td>Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
<td>7439</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Zorita</td>
<td>Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
<td>4389</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Jennifer</td>
<td>Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
<td>3431</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Cara</td>
<td>Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
<td>3990</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Hermione</td>
<td>Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
<td>1016</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Lael</td>
<td>Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
<td>6733</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Jonas</td>
<td>Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
<td>8196</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Shad</td>
<td>Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
<td>6373</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Michael</td>
<td>Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
<td>5384</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Donna</td>
<td>Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
<td>4226</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
@stephanemaarek i have almost the same issue that doesn't load properly the js and css, but for you case try to use the gem 'jquery-turbolinks'.
Hi Carlos,
Thanks for responding. As you can see in the gem file I posted I already have the jquery-turbolinks gem. Did you mean I should remove it?
Thanks
On Wed, Sep 9, 2015, 12:04 PM Carlos Antonio [email protected] wrote:
@stephanemaarek https://github.com/stephanemaarek i have almost the same issue that doesn't load properly the js and css, but for you case try to use the gem 'jquery-turbolinks'.
— Reply to this email directly or view it on GitHub https://github.com/rweng/jquery-datatables-rails/issues/194#issuecomment-138957611 .
Nop, keep it, I can see we got the same issue, I'm looking around if I got something I'll post it.
I found the solution from official DataTables site...
Hey guys, i just wanted you to know that after the upgrade to JQuery 1.11.3 DataTables 1.10.7 is not working anymore. You always get this error message: TypeError: invalid 'in' operand a
When you switch back to JQuery 1.11.2 DataTables is working again. More Information is available under : http://stackoverflow.com/questions/30912605/typeerror-invalid-in-operand-a#
You need jquery-rails v 4.0.4
works for me as well! I guess the alternative would be to do a pull request and update the datatables version on this gem?
On Sun, Sep 13, 2015 at 11:26 AM, Carlos Antonio [email protected] wrote:
[image: :+1:] Thank you @dimidev https://github.com/dimidev, I'll try tonight and I'll let you know.
— Reply to this email directly or view it on GitHub https://github.com/rweng/jquery-datatables-rails/issues/194#issuecomment-139887215 .
ummm I'm still with the issue, yo @stephanemaarek can you please show you Gemfile
Make sure you run bundle update and that your jquery version is indeed
4.0.4 (as shown by the console output)
source "https://rubygems.org"
gem 'activeadmin', github: 'activeadmin'
gem "activerecord-import", ">= 0.4.0"
gem "active_type", ">= 0.3.2"
gem "autoprefixer-rails", ">= 5.0.0.1"
gem "bcrypt", "~> 3.1.7"
gem "bootstrap_form", "~> 2.3.0"
gem 'bootstrap-sass', '~> 3.3.5'
gem 'carrierwave', github: 'carrierwaveuploader/carrierwave'
gem 'coderay'
gem "coffee-rails", "~> 4.1.0"
gem 'devise'
gem "devise-async"
gem "dotenv-rails", ">= 2.0.0"
gem "font-awesome-rails"
gem "faker"
gem "fog-aws"
gem 'jquery-rails', '4.0.4'
gem "jquery-turbolinks"
gem 'jquery-datatables-rails', '~> 3.3.0'
gem "mail", ">= 2.6.3"
gem "marco-polo"
gem 'newrelic_rpm'
gem "pg", "~> 0.18"
gem "pg_search"
gem "rails", "4.2.4"
gem "rchardet"
gem 'resque', "~> 1.25.2", :require => "resque/server"
gem 'roo', '~> 2.1.0'
gem 'sass-rails', '>= 3.2'
gem "secure_headers", ">= 2.1.0"
gem 'smarter_csv'
gem 'simple_form'
gem "sidekiq"
gem "sinatra", ">= 1.3.0", :require => false
gem "turbolinks", ">= 2.5.2"
gem 'x-editable-rails'
gem 'zeroclipboard-rails'
gem 'will_paginate', '~> 3.0.6'
On Mon, Sep 14, 2015 at 2:53 PM, Carlos Antonio [email protected] wrote:
ummm I'm still with the issue, yo @stephanemaarek https://github.com/stephanemaarek can you please show you Gemfile
— Reply to this email directly or view it on GitHub https://github.com/rweng/jquery-datatables-rails/issues/194#issuecomment-140173752 .
Dropping back to rails-jquery 4.0.4, which presumably dropped us back to jquery 2.1.3 fixed the problem but this is not a good long term solution since we'd want the latest version of jQuery. Is the incompatibility reported in dataTables? I see something fixed in April but perhaps this is a different problem.
https://www.datatables.net/forums/discussion/27524/broken-in-jquery-2-1-4-1-11-3
I am having the same issue with: jquery-datatables-rails (3.4.0) jquery-rails (4.2.1) jquery-ui-rails (5.0.5)
Strangely, it works fine in puma with development mode (without precompiled assets) but no styles at all show up in production mode. I verified that the precompiled application-
Is the require syntax in the original application.css.scss example a copy/paste typo? Wouldn't it be *= require?
