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 the lodash gem to your application:

gem 'lodash-rails'

3 - Add some more JavaScript to application.js:

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

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

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

5 - Initialize your datatables using:

responsiveHelper = undefined
breakpointDefinition =
  tablet: 1024
  phone: 480

tableElement = $("#example")
tableElement.dataTable
  autoWidth: false
  preDrawCallback: ->

    # Initialize the responsive datatables helper once.
    responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition)  unless responsiveHelper
    return

  rowCallback: (nRow) ->
    responsiveHelper.createExpandIcon nRow
    return

  drawCallback: (oSettings) ->
    responsiveHelper.respond()
    return

6 - To use see the author of responsive files and follow the instructions as described on datatables-responsive

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

# Unofficial extra is available:
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.

Thanks

Thanks to Comanche for responsive support files datatables-responsive