Sử dụng Rails 3.1 với DataTables

Question

Trong Rails 3.1 đá quý được đề xuất để tích hợp với DataTables là gì?

Answer 1

Tôi chưa tự mình sử dụng, nhưng đây là một trong số đó có sẵn: https://github.com/gryphon/simple_datatables.

Answer 2

Liên kết ngọc sau đây có thể có liên quan: https://github.com/artellectual/rails-datatables

đá quý này là một ngã ba của simple_datatables đá quý (được đề cập bởi Allan) nhưng nó cũng hỗ trợ pagination với Kaminari và tìm kiếm dữ liệu bảng với ajax sử dụng đá quý tìm kiếm meta.

Answer 3

Trong railscast Ryan Bates' về chủ đề này (http://railscasts.com/episodes/340-datatables) ông sử dụng jquery-datatables-ray (https://github.com/rweng/jquery-datatables-rails)

Answer 4

Tôi đang sử dụng đá quý jquery-datatables-rails với bootstrap (twitter-bootstrap-ray đá quý) và nó là hoàn hảo. Các tập railscast trên nó là tuyệt vời - nhưng không đặt đá quý trong nhóm tài sản của bạn hoặc nó sẽ không hoạt động khi triển khai để heroku (kể từ khi nhóm tài sản không được sử dụng trong sản xuất).

Đặt dòng này trong gemfile của bạn:

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

và chạy:

bundle install 

Ngoài ra, hãy chắc chắn để đặt dòng này trong application.rb của bạn:

config.assets.initialize_on_precompile = false 

Add này cho ứng dụng của bạn.js

//= require dataTables/jquery.dataTables 

Và đây một nếu bạn đang sử dụng bootstrap:

//= require dataTables/jquery.dataTables.bootstrap 

Thêm phần này vào application.css của bạn:

*= require dataTables/jquery.dataTables 

Hoặc cái này nếu bạn đang sử dụng bootstrap:

*= require dataTables/jquery.dataTables.bootstrap 

Và nếu bạn đang sử dụng bootstrap, hãy thêm tệp này vào tệp js.coffee của bạn cho bộ điều khiển bạn đang sử dụng datatables trong:

Nếu bạn đang sử dụng container chất lỏng:

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

Nếu bạn đang sử dụng container chiều rộng cố định:

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