Jquery datatables assets pipeline :: sprockets
Include jQuery DataTables in your asset pipeline with ease using jquery-datatables gem.
To use this gem you need to include jQuery in your applications's javascript. To do so you may use the jquery-rails gem. By default rails already include it.
Add this line to your application's Gemfile
:
gem 'jquery-datatables'
And then execute:
$ bundle install
rails g jquery:datatables:install
or if you using bootstrap
rails g jquery:datatables:install bootstrap
this generator will:
-
- append
//= require datatables
addapp/assets/javascripts/application.js
- append
-
- append
*= require datatables
addapp/assets/stylesheets/application.css
- append
-
- create datatable.js in
app/assets/javascripts/
- create datatable.js in
-
- create datatable.css in
app/assets/stylesheets/
- create datatable.css in
Include the JavaScript in your app/assets/javascripts/application.js
:
//= require jquery
//= require datatables
create new file app/assets/javascripts/datatables.js
//Core component
//= require datatables/jquery.dataTables
//Bootstrap4 theme
//= require datatables/dataTables.bootstrap4
//Optional Datatables extensions
//= require datatables/extensions/Responsive/dataTables.responsive
//= require datatables/extensions/Responsive/responsive.bootstrap4
//= require datatables/extensions/Buttons/dataTables.buttons
//= require datatables/extensions/Buttons/buttons.html5
//= require datatables/extensions/Buttons/buttons.print
//= require datatables/extensions/Buttons/buttons.bootstrap4
*** you may refer other extensions in this directory: click me
Include the stylesheet in your app/assets/stylesheets/application.css
:
*= require datatables
create new file app/assets/stylesheets/datatables.css
** default theme
/*
*= require datatables/jquery.dataTables
*= require datatables/extensions/Responsive/responsive.dataTables
*= require datatables/extensions/Buttons/buttons.dataTables
*/
** if using boostrap theme
/*
*= require datatables/dataTables.bootstrap4
*= require datatables/extensions/Responsive/responsive.bootstrap4
*= require datatables/extensions/Buttons/buttons.bootstrap4
*/
*** you may refer other extensions in this directory: click me
Where needed in your JavaScripts, initialize your DataTables:
$(document).ready(function() {
$("#dttb").dataTable();
});
- update instructions
- Fork it
- Commit your changes (
git commit -am 'My Changes'
) - Push your changes (
git push origin
) - Create a new Pull Request