DataTables with Bootstrap 4 Minimal Setup in Rails 6

DataTables with Bootstrap 4 Minimal Setup in Rails 6

DataTable Bootstrap Rails

DataTables provide a quick and handy way to add functionalities to Tables.. In this article we are going to implement DataTable with bootstrap 4 theme to our brand new Rails 6 App. We will be using static data for this article.

rails _6.0.0_ new datatables_demo

Setup

Create home controller and set up your index page.

rails g controller home index

In routes set up root path:

#config/routes.rb
Rails.application.routes.draw do
  root 'home#index'
end

Install essential libraries via yarn i.e. jquery, bootstrap and datatables.

yarn add jquery bootstrap datatables.net-bs4 

datatables.net-bs4 is an extended module of datatables.net for bootstrap type styles. Now set up environment.js.

#config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.append('Provide', new webpack.ProvidePlugin({
	$: 'jquery',
	jQuery: 'jquery'
}))

module.exports = environment

Import JQuery global and require DataTables in application.js.

// app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('datatables.net-bs4')

import $ from 'jquery';
global.$ = jQuery;

Import Bootstrap Css in application.scss. We need to provide absolute path so that asset pipeline can know where the exact file is.

PS: If you are using stylesheet_pack_tag, you don’t need it to include here.

/* app/assets/application.scss */

/*
 *= require_tree .
 *= require_self
 */
@import "bootstrap/dist/css/bootstrap";

Layout/Views

Fill index.html with some sample data and initialize the DataTable via jQuery selector.

<div class="container">
	<table id="example" class="table table-striped table-bordered" style="width: 1000px;">
		<thead>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Age</th>
			<th>Start date</th>
			<th>Salary</th>
		</thead>
		<tbody>
			<tr>
				<td>Tiger Nixon</td>
				<td>System Architect</td>
				<td>Edinburgh</td>
				<td>61</td>
				<td>2011/04/25</td>
				<td>$320,800</td>
			</tr>
			<tr>
				<td>Garrett Winters</td>
				<td>Accountant</td>
				<td>Tokyo</td>
				<td>63</td>
				<td>2011/07/25</td>
				<td>$170,750</td>
			</tr>
			<tr>
				<td> Paul Byrd</td>
				<td> Chief Financial Officer (CFO)</td>
				<td> New York</td>
				<td>64</td>
				<td> 2010/06/09</td>
				<td> $725,000</td>
			</tr>
			<tr>
				<td> Gloria Little</td>
				<td>Systems Administrator</td>
				<td>New York</td>
				<td>59</td>
				<td>2009/04/10</td>
				<td>$237,500</td>
			</tr>
			<tr>
				<td>Bradley Greer</td>
				<td>Software Engineer</td>
				<td>London</td>
				<td>41</td>
				<td>2012/10/13</td>
				<td>$132,000</td>
			</tr>
			<tr>
				<td>Dai Rios</td>
				<td>Personnel Lead</td>
				<td>Edinburgh</td>
				<td>35</td>
				<td>2012/09/26</td>
				<td>$217,500</td>
			</tr>
			<tr>
				<td>Jenette Caldwell</td>
				<td>Development Lead</td>
				<td>New York</td>
				<td>30</td>
				<td>2011/09/03</td>
				<td>$345,000</td>
			</tr>
		</tbody>
	</table>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $('#example').DataTable();
  });
</script>

Now, start the server rails s and head over to http://localhost:3000

jquery datatables with bootstrap 4 in  rails 6
You will see the screen like this.

Voila it worked. Try searching and sorting to check everything is fine. Anyone looking for exact code base to implement DataTable with bootstrap 4 in Rails 6 can check here: https://github.com/Rajan4436/datatables_demo

Troubleshooting

There are possibilities that you might run into JQuery issues. Below are the points you should check first.

  • Check you table structure. The <td> and <tr> elements should be properly nested.
  • Check for any rowspan or colspan attributes if they are present either remove them or make it sure the corresponding cells counts should be same for every span.
  • Check if there is any <tfoot> tag. Consider removing it because it is the culprit in many cases.
  • Number of columns should be same in <thead> and <tbody>

Hope this helps.

10 Replies to “DataTables with Bootstrap 4 Minimal Setup in Rails 6”

  1. This error is not sufficient to debug the exact issue, however I am pretty sure you have messed up the jQuery. Either it hasn’t loaded or you have changed the $ to something else.

  2. DOES NOT WORK. Nobody can tell you how either. There’s 50,000,000,000 articles on this and people STILL cannot get this to work.

    $(…).dataTable NOT A FUNCTION.

  3. Didn’t work for me. Finally got it to work by following this guide: https://inopinatus.org/2019/09/14/webpacker-jquery-and-jquery-plugins/.

    yarn add datatables.net-bs4 imports-loader

    application.js looks like this:

    require(‘@rails/ujs’).start()
    require(‘@rails/activestorage’).start()
    require(‘channels’)
    require(‘jquery’)
    require(‘bootstrap/dist/js/bootstrap’)
    window.$ = $

    require(‘imports-loader?define=>false!datatables.net’)(window, $)
    require(‘imports-loader?define=>false!datatables.net-bs4’)(window, $)

  4. In the image you posted the format of datatables in not right. For example the keyqord “Search” and the corresponding input field should be on the same line and on the right side of the table. Add following to the application.css to load the format correctly:

    @import ‘admin-lte/dist/css/adminlte’;
    @import ‘admin-lte/plugins/datatables-bs4/css/dataTables.bootstrap4.css’;

    The rest of you tutorial worked like a charm. Thank you 🙂

  5. Haha. Thanks i am aware about this. the css was not loaded properly when i took screenshot. Thanks for suggesting.

  6. I had to add

    @import ‘datatables.net-bs4/css/dataTables.bootstrap4.css’;

    in order to get the correct style.

  7. Thanks for posting this. I have spent weeks chasing my tail trying to figure this out. This now works perfectly!

Leave a Reply