Giter Site home page Giter Site logo

simple_datatables's Introduction

Simple Datatables for Kaminari

This fork works with kaminari gem!

Connects two awesome plugins - Datatables for Jquery and Meta Search together for Rails 3.1

Install

Add the following to your Gemfile to install simple datatables:

gem 'simple_datatables'

After bundle install add this line to rails 3.1 assets pipeline and restart server:

//= require simple_datatables

Installation completed.

Description

There are two ways to map awesome Datatables plugin request fields for Rails.

  • First is to convert request on the server side

  • Second is to prepare correct request on the client side

This gem provides interface for the second way. To use it you should do the following easy three steps:

Create simple meta_search and kaminari (optionally) controller action as usual and add “.datatables” format

respond_to :html, :datatables

def search
  @products = Product.search(params[:search]).page(params[:page]).per(params[:per_page])
  respond_with @products
end

Use standard datatables initializer options for creating table:

  • bServerSide: true

  • sAjaxSource: path to your controller

  • fnServerData: point to simpleDatatables function

  • aoColumns: you should define all searchable/fiterable sName attributes here. Use format as used in meta_search (with underscores)

Create Jsonify view with column values for columns listed in aoColumns. See example for clarification.

This gem uses:

  • meta_search for nice search and sort request syntax mapping

  • jsonify for simple output generation

This gem provides integration with:

  • will_paginate for nice pagination request syntax mapping

Gem works only with rails 3.1.

Gem includes datatables library and fnSetFilteringDelay plugin so you haven’t include it by yourself.

Pagination

Simple_datatables is compatible with Kaminari. Datatables will provide you “page” and “per_page” request params.

If you do not use pagination do not forget to save search result to some variable with meta_search relation method:

@products = Product.search(params[:search]).relation

Search for all fields

Note that fulltext search will work only with text fields due to meta_search restrictions. To prevent errors use bSearchable: false for non-text columns in aoColumns field.

Regex search

Due to meta_search restrictions it is impossible to use regex search for now.

Instead, this gem recognizes bSearch flag as “contains” meta_search finder.

By default “starts_with” is used due to database performance reasons.

Independent fields search will always search using “starts_with” finder.

Example

The following code will show products list datatables. Manufacturer is belongs_to association for Product.

In your controller:

respond_to :html, :datatables

# GET /products/search
def search
  @products = Product.search(params[:search]).paginate(:page => params[:page], :per_page=>params[:per_page])
  respond_with @products
end

In your search view:

@products.each do |product|
  json << [product.name, product.manufacturer.name]
end

In your index view:

%table#products
  %thead
    %tr
      %th= Product.human_attribute_name :name
      %th= Product.human_attribute_name :manufacturer

  %tbody

In your javascript:

$("products").dataTable($("table#products"), {
    "sAjaxSource"     : "/products/search.datatables",
    "aaSorting"       : [[0, 'asc']],
    "aoColumns"       : [
      {"sName":"name"},
      {"sName":"manufacturer_name"},
    ],
    "bServerSide"     : true,
    "fnServerData"    : simpleDatatables
  });

Copyright © Grigory Dmitrenko, 2011. See LICENSE for details.

simple_datatables's People

Contributors

ehogberg avatar gryphon avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.