Ruby on Rails and DataTables plug-in. Overview

Ruby on Rails and DataTables plug-in. Overview
Average rating: 0
(0 votes)

Hi there! Are you a Ruby on Rails developer? Ever thought about why you should set up on backend all the pagination, sorting, searching and other stuff for the tables you’re showing in your views? I mean, that’s not a big deal but it means more code in your controllers, code in different actions similar enough to annoy you and still too different and insignificant to make you want to refactor it by let’s say creating a class where you’ll be able to initialize any table and provide additional functionality to it in the same way.

Wouldn’t it be great to have one tool to handle all the tables in your app, to get one ring to rule them all?

Or maybe your tables are not even remotely big so it would be great just to throw the whole dataset to the view, so no one bothers your database with additional requests of retrieving every single page or applying the sorting or performing the search. Why can’t browser do that within the view you just sent to it?

Actually, it can. And actually, it can do that pretty much efficiently with this DataTables plug-in for JQuery which can be the solution for all of your tables. If you go to https://datatables.net/ and check out the docs, you’ll see that the tool is just neat! Also, it offers you features which can cover almost everything you ever wanted to do with your tables.

Let’s start this tutorial with a short plug-in overview so that we can move to some advanced examples later.

So, if you have any valid HTML table in your view:

<table id="static-table" class="display">
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data11</td>
      <td>Data12</td>
      <td>Data13</td>
    </tr>
    <tr>
      <td>Data21</td>
      <td>Data22</td>
      <td>Data23</td>
    </tr>
  </tbody>
</table>

You can get all the DataTables functionality instantly with simple JQuery code that may look like this:

$(document).ready( function () {
  $('#your-table-id').DataTable();
} );

Notice that we initialize our datatable on the particular HTML table with your-table-id id. That’s how you tie DataTables functionality to your tables.

Now, look at your brand new table with column ordering, pagination and instant search powered by Javascript and basic Bootstrap styling! Isn’t it great?

But you can say that’s just a static HTML! What if I use tables served with the data from my backend?

No worries! The plug-in supports different sources of data for datatables. You also may use datasets from Javascript arrays or even arrays of objects:

var dataset = ,
 
]

Your datatable initialization will now look like following:

$('#your-table-id').DataTable( {
  data: dataset,
  columns:
} );

Furthermore, you can serve your table with the dataset returned by Ajax:

$('#your-table-id').DataTable( {
  ajax: '/url-to-api-endpoint'
} );

The dataset in this case obviously must be returned in JSON format.

Basically, all the things you’ve seen so far rely on the browser and some Javascript code that offers you a possibility to work with your datatable on the client side. It’s called Client-side processing in DataTables and and that’s the default option. But if your table contains hundreds of thousands or millions of records reading data from the DOM will naturally be slow and Client-side processing won’t be good.

That’s where Server-side processing kicks in. When things become slow with a huge amount of data you may do your pagination, ordering and searching on the backend and return the small portions of processed data to the datatable.

You’ll need to set serverSide property to true

$('#your-table-id').DataTable( {
  serverSide: true,
  ajax: '/url-to-some-api-endpoint'
} );

Then write some code on your backend to process the requests and return JSON data along with additional parameters needed for DataTables such as a number of filtered records etc.

Interested yet? Stay tuned for the next part of this tutorial where we’ll write some code and look at more real-life examples.

Author: Vadim Tsvid, Syndicode Ruby on Rails developer

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

*By submitting this form you agree with our Privacy Policy.

Mailing & Legal Address

Syndicode Inc. 340 S Lemon Ave #3299, Walnut CA, 91789, USA

Visiting & Headquarters address
Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
Email info@syndicode.com
Phone (+1) 9035021111