jquery-datatables-rails

This gem packages the jQuery DataTables plugin for easy use with the Rails 3.1+ asset pipleine. It provides all the basic DataTables files, and a few of the extras.

Important

The current gem is released without updated plugins.

jQuery DataTables renamed the parameters names, if you are updating, please take a look http://www.datatables.net/upgrade/1.10-convert

If you encounter any errors, please fork the repository, update the plugin files and send a pull-request.

General Installation

1 - Add to your Gemfile:

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

2 - Install the gem:

bundle install

3 - Add the JavaScript to application.js:

//= require dataTables/jquery.dataTables

4 - Add the stylesheets to application.css:

*= require dataTables/jquery.dataTables

Twitter Bootstrap 2 Installation

1 - Complete steps 1-3 of the General Installation.

2 - Add some more JavaScript to application.js:

//= require dataTables/bootstrap/2/jquery.dataTables.bootstrap

3 - Add this (and only this) stylesheet to application.css:

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

4 - Initialize your datatables using one of these options:

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

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

Twitter Bootstrap 3 Installation

1 - Complete steps 1-3 of the General Installation.

2 - Add some more JavaScript to application.js:

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

3 - Add this (and only this) stylesheet to application.css:

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

4 - Initialize your datatables using these option:

$('.datatable').DataTable({
  // ajax: ...,
  // autoWidth: false,
  // pagingType: 'full_numbers',
  // processing: true,
  // serverSide: true,

  // Optional, if you want full pagination controls.
  // Check dataTables documentation to learn more about available options.
  // http://datatables.net/reference/option/pagingType
});

Zurb Foundation Installation

1 - Complete steps 1-3 of the General Installation

2 - Add some more JavaScript to application.js:

//= require dataTables/jquery.dataTables.foundation

3 - Add this (and only this) stylesheet to application.css:

*= require dataTables/jquery.dataTables.foundation

Responsive Installation

1 - Complete steps 1-3 of the General Installation.

2 - Add some more JavaScript to application.js:

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

3 - Add this (and only this) stylesheet to application.css:

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

4 - Initialize your datatables using:

$("#example").DataTable
  responsive: true

5 - Add responsive no-wrap class to html table,

<table class="display responsive no-wrap">
    <thead>
        <tr>

        </tr>
    </thead>
    ...
</table>

6. More information at: http://www.datatables.net/extensions/responsive/init

Plugins

Only a few plugins are currently available

• api
  • fnReloadAjax
  • fnGetColumnData
  • fnFilterOnReturn
  • fnSetFilteringDelay
• sorting
  • numbersHtml
• typeDetection
  • numberHtml

These files can be found in the assets directory.

Extras

# Official extras are available:
[Plugin]     : [ExtraName]
AutoFill     : dataTables.autoFill
ColReorder   : dataTables.colReorder
ColVis       : dataTables.colVis
FixedColumns : dataTables.fixedColumn
FixedHeader  : dataTables.fixedHeader
KeyTable     : dataTables.keyTable
Scroller     : dataTables.scroller
TableTools   : dataTables.tableTools
Responsive   : dataTables.responsive

How to use Extras

1 - To add an extra into your application, add its JS file to application.js using the following pattern:

//= require dataTables/extras/[ExtraName]

2 - Additionally, you may need to add any associated CSS files. For instance the TableTools extra requires you to add the following line to your application.css file:

*= require dataTables/extras/dataTables.tableTools

Make sure to also add it's initialization as described on datatables extras' site.

Articles and Extras

RailsCast #340 DataTables Apr 11, 2012.

ajax-datatables-rails a wrapper around datatable's ajax methods that allow synchronization with server-side.