How to sort data in Rails app using ‘DataTable’ gem

Sorting, searching and paginating data has always been one of the requirements of a Rails application.DataTable gem provides a jQuery Javascript library - Highly flexible tool, based upon the foundations of progressive enhancement which will add advanced interaction controls to any HTML table.

Integrate this gem in the Rails application by putting this gem into gemfile.

DataTables makes it easy to convert a plain HTML table into one with  pagination, sorting, and searching - all done with JavaScript or jQuery. Instead of writing searching functionality, sorting functionality and pagination functionality separately, these functionalities are conveniently performed by using datatable gem.

Sorting data is inbuilt so instead of sortable_table gem use datatable gem and all columns are sortable in ascending and descending order.

In some cases, we have to hide searching, pagination functionality in table. For hiding pagination functionality we have to write "bPaginate": false   and for hiding searching functionality we have to write "searching": false.

When you reload the page,you can see your listing page in better UI with sorting searching and pagination functionality.

The following steps with the description implements sorting,searching and pagination for particular table using datatable gem in our ruby on rails applicationeasily.

STEP 1. gem install jquery-datatables-rails

STEP 2. Open app/assets/javascript/application.js and write :

//= require dataTables/jquery.dataTables

STEP 3. Open app/assets/stylesheets/application.css and write :

          *= require dataTables/jquery.dataTables

STEP 4. Provide id for a particular table.

<table class="table table-bordered table-striped" id="myTable">

STEP 5. Call this table id by jQuery DataTable() function.

Sample Code:

<table class="table table-bordered table-striped" id="myTable">

<script type="text/javascript">

$(document).ready(function(){

$('#myTable').DataTable();

});

</script>

In some cases, we have to hide searching, pagination functionality in table.

For hiding pagination and searching functionality we have to write:

<script type="text/javascript">

          $('#myTable').DataTable({

"bPaginate": false,

"searching": false

} );

</script>