Posts Tagged ‘jquery’

Here we will discuss about the server side datatable with rails 4.
I was working with a project where we need to list/show a few thousands of records in a table, pagination, sortingĀ  and also advanced searching for those records. So for this scenario I had to use a datatable (server side).

So today we will see how the datatable can be used with serverside in rails 4.

jQuery Datatable can be used for sorting, searching, paginating a number of records in a table.

new

First of all we need include the js and css in the application.js and the application.css respectively.
example:

require dataTables/jquery.dataTables

Now first we will write the code for view then controller then datatables.
In the view, lets see a piece of code as the example.
Suppose we have to show User name, email, joining date etc.

<table id="users_listing" class="datatable-list">
  <thead>
  <tr>
    <th>User Name</th>
    <th>Email</th>
    <th>Join Date</th>
    <th>Ads</th>
    <th>Tokens</th>
    <th>Status</th>
    <th>Action</th>
  </tr>
  </thead>
  <tbody></tbody>
</table>

Now we have to make a datatable folder for the model so that we can save all the datatable at the same place , it may useful when we have more than one datatable. Like assets , controller, model folder we will make datatable folder, in that we will make user_datatable.rb

class UsersDatatable
delegate :params, :h, :link_to, :edit_user_path, to: :@view

def initialize(view)
@view = view
end

def as_json(options = {})
{
sEcho: params[:sEcho].to_i,
iTotalRecords: User.all.count,
iTotalDisplayRecords: users.total_count,
aaData: data
}
end

in the private methods we have to write the methods for data

private

def data
users.map do |user|
[
link_to(user.name, edit_user_path(user)),
user.email,
user.created_at.strftime(&quot;%m/%d/%Y&quot;),
user.ad_count,
user.token_sum,
(user.status ? 'Active': 'Inactive'),
link_to('Delete', admin_user_path(user, type: 'users'), method: :delete, data: {confirm: 'Are you sure to delete this user?'})
]
end
end

def users
@users ||= fetch_users
end

def fetch_users

if user_search.present?
#do something
end

users
end

def page
params[:iDisplayStart].to_i/per_page + 1
end

def per_page
params[:iDisplayLength].to_i &amp;gt; 0 ? params[:iDisplayLength].to_i : 10
end

def sort_column
columns = %w[first_name email created_at sum(test_23.total_ad) total status]
columns[params[:iSortCol_0].to_i]
end

def sort_direction
params[:sSortDir_0] == &quot;desc&quot; ? &quot;desc&quot; : &quot;asc&quot;
end

def user_search
#here you can write searching mechanism.
end

end

Now moving to controller

render json: UsersDatatable.new(view_context)

in the js file we need to add this

  var table = $("#users_listing").DataTable({
        iDisplayLength: 100,
        bInfo: false,
        bSort: true,
        sPaginationType: "full_numbers",
        bStateSave: true,
        bDestroy: true,
        bProcessing: true,
        bServerSide: true,
        bFilter: false,
        sAjaxSource: '/test_users/search',
        fnServerParams: function (aoData) {
            aoData.push(
                { "name": "email_or_name", "value": $("#_email_or_name").val() },
                { "name": "check_token", "value": check_token_value },
                { "name": "from_no_of_tokens", "value": from_token_value }
                { "name": "status", "value": $("#_status").val() }
            );
        },
        "aoColumns": [ null,  null,   null, { "bSortable": true}, { "bSortable": true}, null,  { "bSortable": false}],
        oLanguage:{
            sZeroRecords: "No users found."},
        "sDom": 'rtlfip'

    });

Now call the function and enjoy.
Hope this will help!!!

Advertisements