[RoR] dataTables使用筆記

• 是一套著名的JQuery套件，主要用來做Table的使用者經驗提升，預設就有排序、全表搜尋、分頁的功能。
• 這篇是我開始使用Ruby on Rails以來，算是花滿多時間跟精力處理的gem，study了多篇文章，在論壇中提了兩個問題(自解了一個)，除了解dataTables的使用方式，也額外了解了Turbolinks的功能，算是收穫頗豐。

系統實作

基本安裝

• 新增Gemfile後執行bundle install

gem 'jquery-datatables-rails', '~> 3.3.0'

• 修改application.js，並新增

//= require dataTables/jquery.dataTables

• 修改application.css，並新增

*= require dataTables/jquery.dataTables

Bootstrap 3

• 如果有使用Bootstrap 3，要進行額外設定這個部份
• 修改application.js

//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap

• 修改application.css，
• 新增

*= require dataTables/bootstrap/3/jquery.dataTables.bootstrap

• 因為會造成衝突，所以需要刪除application.css中的

*= require dataTables/jquery.dataTables

• 如果使用scss，則要改為 *= require dataTables/bootstrap/3/jquery.dataTables.bootstrap.scss

設定JQuery

• 修改html，指定table tag的id

• 要確定表頭跟表身的數量要一致，也就是th數量要等於td的數量
  
• 修改對應的coffee檔，此案例中要修改的是customers.coffee

jQuery ->
    $('#Table tag的id').DataTable({        
        });

實作結果

Troubleshooting

無法操作

dataTable可以正常顯示，但是卻沒辦法操作，或是很難操作

原因

• dataTable與jquery-rails最新版本不和
• 撰寫此文時，dataTables版本為3.3.0，與jquery-rails 4.0.5版不和，只要在Gemfile中指定jquery-rails版本為4.0.4版即可。

解決辦法

• 修改Gemfile，指定jquery-rails為4.0.4版

gem 'jquery-rails', '4.0.4'

• 執行bundle update jquery-rails

無法正常顯示

dataTables的jQuery在page每次開啟時都沒有work，需要做reload page後效果才會正常。

Reload page before

Reload page after

原因

這是因為Turbolinks這個Gem所造成的，因為在頁面更新時，Turbolinks只會更新內容並不更新css與javascript。

解決方式

把Turbolinks從Gemfile裏移除跟把application.js裡跟Turbolinks有關的也移除後就正常了