Używanie Rails 3.1 z DataTables

Question

W Rails 3.1 jaki klejnot jest zalecany do integracji z DataTables?

Answer 1

Nie wykorzystałem go sam, ale jest dostępny: https://github.com/gryphon/simple_datatables.

Answer 2

Poniższy link gem mogą być istotne: https://github.com/artellectual/rails-datatables

Ten Klejnot jest rozwidlenie gem simple_datatables (wspomniane przez Allan), ale obsługuje również podział na strony z Kaminari i wyszukiwanie danych w tabeli z AJAX przy użyciu wyszukiwarki meta gem.

Answer 3

W RailsCast Ryan Bates' w temacie (http://railscasts.com/episodes/340-datatables) używa jQuery DataTables poręcze (https://github.com/rweng/jquery-datatables-rails)

Answer 4

Używam jquery-datatables-rails klejnot z bootstrap (bootstrap twitter-barierki gem) i jest idealny. Epizod railscast jest świetny - ale nie umieszczaj go w grupie aktywów lub nie będzie działał po wdrożeniu w heroku (ponieważ grupa aktywów nie jest używana w produkcji).

Umieść tę linię w gemfile:

gem 'jquery-datatables-rails', github: 'rweng/jquery-datatables-rails' 

i uruchom:

bundle install 

Ponadto, upewnij się umieścić tę linię w environment.rb:

config.assets.initialize_on_precompile = false 

Dodaj to do twojego application.js

//= require dataTables/jquery.dataTables 

A ten, jeśli używasz bootstrap:

//= require dataTables/jquery.dataTables.bootstrap 

dodać do swojej application.css:

*= require dataTables/jquery.dataTables 

albo to jeden jeśli używasz bootstrap:

*= require dataTables/jquery.dataTables.bootstrap 

Jeśli używasz programu ładującego, dodaj to do pliku js.coffee dla kontrolera, którego używasz: Data:

Jeśli pojemniki są za pomocą środka:

#// For fluid containers 
$('#dashboard').dataTable({ 
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", 
    "sPaginationType": "bootstrap" 
}); 

przypadku korzystania stałych pojemników szerokość:

#// For fixed width containers 
$('.datatable').dataTable({ 
    "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>", 
    "sPaginationType": "bootstrap" 
});