How to integrate bootstrap with Ruby on Rails!

Twitter Bootstrap is one of the defacto tool for web developers to build responsive and modern web applications , to integrate bootstrap with ruby on rails we have to follow the following steps.

• STEP 1 : Install ‘bootstrap-sass’ gem
• STEP 2 : Insert this line of code “require ‘bootstrap-sass’”” in top of config.ru file
• STEP 3 : Create “bootstrap-config.scss” file in /app/assets/stylesheets folder
• STEP 4 : Insert this line of code ‘ @import “bootstrap”; ‘ in bootstrap-config.scss file
• STEP 5 : Restart application

Thats it, you are done!

Install ajax datatables gem on rails 4

This is part 1 of a 2-part tutorial series.

In part one of this tutorial, we will introduce you to these four tools

1. DataTable (Jquery Library)
2. jquery-datatables-rails (Ruby Gem)
3. ajax-datatables-rails (Ruby Gem)
4. kaminari (Ruby Gem)

And We will also teach you how to create a Rails app and integrate it with jquery-datatables-rails and ajax-datatables-rails.

What is DataTable?

DataTable is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

What is jquery-datatables-rails?

jquery-datatables-rails is a ruby gem and this 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.

What is ajax-datatables-rails?

ajax-datatables-rails is a ruby gem,it helps to enable ajax functionality for datatable, and this gem makes our life lot easier , without this gem the way to enable ajax on your datatable is very cumbersome , for that i am thanking ajax-datatables-rails.

What is kaminari?

kaminari is a Scope & Engine based, clean, powerful, customizable and sophisticated paginator for modern web app frameworks and ORMs

Create a new Rails application

This section will help you create a new Rails application. If you already have an application that you want to integrate with jquery-datatables-rails and ajax-datatables-rails, please skip to Part 2 The Datatables with ajax functionality.

First you will need to make sure that you install the Rails gem.

gem install rails

Now let’s create our sample Rails app called simple_app.

rails new simple_app

and generate a User model:

rails generate scaffold User name:string phone:string address:string

Migrate the changes to your database:

rake db:migrate

We need some data to show for our simple app, so let’s seed the database with some sample user data. Put the following lines in your db/seeds.rb file.

#db/seeds.rb
User.create!(name: 'User1', phone: '111111111', address: "xyz xyz xyz")
User.create!(name: 'User2', phone: '121212121', address: "zyx zyx zyx")
User.create!(name: 'User3', phone: '131313131', address: "zyx zyx zyx")
User.create!(name: 'User4', phone: '141414141', address: "zyx zyx zyx")
User.create!(name: 'User5', phone: '151515151', address: "zyx zyx zyx")
User.create!(name: 'User6', phone: '161616161', address: "zyx zyx zyx")

then run the following in your terminal/command prompt:

rake db:seed

Now let’s set up a simple route:

# config/routes.rb
Rails.application.routes.draw do
  resources :users
  root 'users#index'

  ...

Now run the server:

rails s

Now when you visit the app in your browser, at http://localhost:3000, you should see this:

Integrating ajax-datatables-rails with Rails

Now that we have a Rails app with some data in it, we can start working on integrating ajax-datatables-rails.

Install these three Ruby Gems jquery-datatables-rails, ajax-datatables-rails , and kaminari

Let’s add the necessary gems to our Gemfile:

# Gemfile
...

gem 'jquery-datatables-rails', git: 'git://github.com/rweng/jquery-datatables-rails.git', branch: 'master'
gem 'ajax-datatables-rails'
gem "kaminari"

Now run

bundle install

to install the gems.

Import Datatable Javascript assets

You need to add:

//= require dataTables/jquery.dataTables

to your app/assets/javascripts/application.js file.

Import Datatable CSS assets

*= require dataTables/jquery.dataTables

to your app/assets/stylesheets/application.css file.

It is important that it comes after:

//= require jquery

Your application.js file should look like this:

// app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require dataTables/jquery.dataTables
//= require_tree .

It is also important that:

//= require_tree .

is the last thing to be required.

The reason is, //= require_tree . compiles each of the other Javascript files in the javascripts directory and any subdirectories. If you require dataTables/jquery.dataTables after everything else, your other scripts may not have access to the DataTables functions.

Congratulations You now have a working Rails app with Datatable installed. In Next post in this series will tech you how to enable datatables with ajax functionality for your html table.

Read Part 2 of this turorial series for to enable datatables with ajax functionality

Enable ajax functionalify for datatables on rails

This is part 2 of a 2-part tutorial series.

In this part two of this tutorial we will going to tech you have to enable Datatables with ajax functionality to our html table.

To enable datatables we have to two things

1. Generate custom datatable configuration file

2. Configure custom datatable configuration file for your model

3. Initialize datatables on the following files

(for this example we are going to work on user related files witch we already created on previous part of this tutorial)

• app/views/users/index.html.erb
• app/controllers/users_controller.rb
• app/assets/javascripts/users.js.coffee

Generate custom datatable configuration file

rails generate datatable User

This will generate a file named user_datatable.rb in app/datatables.

Configure custom datatable configuration file for your model(my case the file is user_datatable.rb)

Before making any change the file will look like this

# uncomment the appropriate paginator module,
# depending on gems available in your project.
# include AjaxDatatablesRails::Extensions::Kaminari
# include AjaxDatatablesRails::Extensions::WillPaginate
# include AjaxDatatablesRails::Extensions::SimplePaginator

def sortable_columns
  # list columns inside the Array in string dot notation.
  # Example: 'users.name'
  @sortable_columns ||= []
end

def searchable_columns
  # list columns inside the Array in string dot notation.
  # Example: 'users.name'
  @searchable_columns ||= []
end

• For paginator options, just uncomment the paginator you would like to use, given the gems bundled in your project. For example, if your models are using Kaminari, uncomment AjaxDatatablesRails::Extensions::Kaminari.

• For sortable_columns, assign an array of the database columns that correspond to the columns in our view table. For example [users.name, users.phone]. This array is used for sorting by various columns.

• For searchable_columns, assign an array of the database columns that you want searchable by datatables. For example [users.name, users.phone]

• For listing record from database to table you have to select what are all the attributes you are going to list on the html table on the data funciton.

def data
end 

• For selecting query you have to define in this function

get_raw_records

For this example project i have these requirements

I need searchable on these two attributes

1. name
2. phone

And i need sortable columns for these two

1. name
2. phone

And i would like to print the following attributes on the table

1. name
2. phone
3. address

And i am using kaminari for pagination

After making changes my UserDatatable.rb file will look like this

class UserDatatable < AjaxDatatablesRails::Base
  # uncomment the appropriate paginator module,
  # depending on gems available in your project.
  include AjaxDatatablesRails::Extensions::Kaminari
  # include AjaxDatatablesRails::Extensions::WillPaginate
  # include AjaxDatatablesRails::Extensions::SimplePaginator

  def sortable_columns
    # list columns inside the Array in string dot notation.
    # Example: 'users.name'
    @sortable_columns ||= ['users.name' ,'users.phone']
  end

  def searchable_columns
    # list columns inside the Array in string dot notation.
    # Example: 'users.name'
    @searchable_columns ||= ['users.name' ,'users.phone']
  end

  private

  def data
    records.map do |record|
      [
        record.name,
        record.phone,
        record.address
      ]
    end
  end

  def get_raw_records
    User.all
  end

end

Initialize datatables on the following files

• app/views/users/index.html.erb
• app/controllers/users_controller.rb
• app/assets/javascripts/users.js.coffee

Initialize on view file (app/views/users/index.html.erb)

<table id="users-table", data-source="<%= users_path(format: :json) %>">
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone</th>
      <th>Address</th>
      <th colspan="3"></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Initialize on controller index action on this file (app/controllers/users_controller.rb)

  def index
    respond_to do |format|
      format.html
      format.json { render json: UserDatatable.new(view_context) }
    end
  end

Initialize js on this file (app/assets/javascripts/users.js.coffee)

$ ->
  $('#users-table').dataTable
    processing: true
    serverSide: true
    ajax: $('#users-table').data('source')
    pagingType: 'full_numbers'

Congratulations Now when you visit the app in your browser, at http://localhost:3000, you should see this:

You have successfully integrated and enabled datatables on your project . Thank you for reading .

Welcome to myblog!

Hi all this is my first ever personal blog build on jekyll