ajax_table_rails 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 135199e12d3994cb2cd2ca99096927029366910b
-  data.tar.gz: c73f7a30edcd5f8b9685577b7d048d91b3f1a180
+  metadata.gz: b5d01e5c8e5273ed807ac6ccb4fa53c2e18744e4
+  data.tar.gz: 2aed6fc52f83751cf394a05746a4765fc172a538
 SHA512:
-  metadata.gz: 9ca2d2d538d6a6e1ae355d68bbfb3502b4de9370905ca02603a2bc9fb1353b71ca57d92474b072d9f2649f20cd8fbe9dbef45e7e287cdabaa4c0983e1526dd5f
-  data.tar.gz: 536c0b373cc3959ed3c10ab27916079b824dce0f64aea7081ecbf1bd4e23adf1e8999f0ae3d4a576a3693282ec62330b00f27a3b329f898a0c93a2fcf97d64e1
+  metadata.gz: 825b22093e803c527b8ee61e59b41cc0158d756f5ababfd5c00860214a6a6905d82463d32e15d264c808a9c92d7ad6b127d2dfeb7a83d72a9035de6de364fd80
+  data.tar.gz: 2bd8ddcbae62e2bde5b792a262c86274a03eda4b64ae084da05848c408e05827f742d911a366f5421b4210ade3625417a7ff82406fde08f56c8f84e38f883103

data/CHANGELOG.md

@@ -1,3 +1,7 @@
+## v0.0.2
+
+* Initial search implementation
+
 ## v0.0.1
 
 * Initial release

data/README.md

@@ -24,12 +24,14 @@ Add the following to your `app/assets/javascripts/application.js`:
 //= require ajaxtable
 ````
 
-### Build your table
+### Basic usage
+
+#### Build your table
 
 In your view (using Users as an example):
 
 ````
-<table class="ajax-table" data-source="<%= users_path(format: :json)%>">
+<table class="ajax-table" data-source="<%= users_path(format: :json)%>" id="users-table">
   <thead>
     <tr>
       <th data-sort-column="name">Name</th>
@@ -60,30 +62,7 @@ In this example, the table will automatically initialize, and the Name and Email
 | table class | "ajax-table" required for ajax tables to auto-init. Exclude this if you wish to init manually with custom settings (see below). |
 | th data-sort-column | Matches database column you'd like to sort against. |
 
-### Customize your table
-
-AjaxTableRails is built with Bootstrap and FontAwesome in mind, as well as some other defaults that may make you unhappy. You may want to override the classes used for pagination and sorting, as well as some other bits and bops. Here's what a full customization looks like (default values shown):
-
-````
-$(function() {
-  ajaxTable.init($('#some-table'), {
-    cssClasses: {
-      count: 'at-count',          // "Showing xx records out of xx" span
-      pagination: 'pagination',   // Pagination ul, defaults to match Bootstrap
-      sort: 'at-sort',            // Sort icon base class
-      sortAsc: 'fa fa-sort-up',   // Sort icon ascending indicator, defaults to use FontAwesome
-      sortDesc: 'fa fa-sort-down' // Sort icon descending indicator, defaults to use FontAwesome
-    },
-    text: {
-      count: 'Showing {count} records out of {total_count}', // Pass null to skip rendering of this element
-      nextPage: '&raquo;',
-      previousPage: '&laquo;'
-    }
-  });
-});
-````
-
-### Build your controller
+#### Build your controller
 
 Call `set_ajax_table` in a `before_action` to set your sorting criteria, then setup the query in a JSON response block.
 
@@ -112,7 +91,60 @@ end
 | default_column | Your default sort column (if unspecified, defaults to `id`) |
 | default_direction | Your default sort direction (if unspecified, deaults to `asc`) |
 
-### Make it shiny
+#### Build your JSON
+
+You need to render two JSON nodes: `rows` for your records, and `pagination` for your pagination details.
+
+````
+json.rows(@users) do |user|
+  json.extract!(user, :name, :email)
+  json.action link_to("Edit", edit_user_path(user), class: "btn")
+end
+json.pagination do
+  json.per_page User.default_per_page
+  json.count @users.size
+  json.total_count User.count
+end
+````
+
+### Advanced usage
+
+#### Filtering results
+
+**Under construction.** Adding the following anywhere on your page will currently work.
+
+````
+<form class="ajax-table-search" data-ajax-table-id="users-table">
+  <input class="ajax-table-search-input">
+  <a href="#" class="ajax-table-reset">x</a>
+  <input type="submit" value="Search">
+</form>
+````
+
+#### Customize your table
+
+AjaxTableRails is built with Bootstrap and FontAwesome in mind, as well as some other defaults that may make you unhappy. You may want to override the classes used for pagination and sorting, as well as some other bits and bops. Here's what a full customization looks like (default values shown):
+
+````
+$(function() {
+  ajaxTable.init($('#some-table'), {
+    cssClasses: {
+      count: 'at-count',          // "Showing xx records out of xx" span
+      pagination: 'pagination',   // Pagination ul, defaults to match Bootstrap
+      sort: 'at-sort',            // Sort icon base class
+      sortAsc: 'fa fa-sort-up',   // Sort icon ascending indicator, defaults to use FontAwesome
+      sortDesc: 'fa fa-sort-down' // Sort icon descending indicator, defaults to use FontAwesome
+    },
+    text: {
+      count: 'Showing {count} records out of {total_count}', // Pass null to skip rendering of this element
+      nextPage: '&raquo;',
+      previousPage: '&laquo;'
+    }
+  });
+});
+````
+
+#### Make it shiny
 
 Use whatever CSS you like. Here's a rudimentary example of some things you may want to do.
 
@@ -144,7 +176,7 @@ Copyright &copy; 2014 Yuval Kordov. See MIT-LICENSE for further details.
 
 ## TODO
 
-* Windowed pagination
 * Result filtering
+* Windowed pagination
 * Show default sort
 * Allow customization via data attributes

data/app/assets/javascripts/ajaxtable.js

@@ -1,8 +1,10 @@
 var ajaxTable = (function($) {
 
-  // On document ready, ajaxify all tables with the `ajax-table` class.
+  // On document ready:
+  // ajaxify all tables with the `ajax-table` class
+  // bind search/reset via forms with the `ajax-table-search` class
   //
-  // If you want to use custom settings, forego the `ajax-table` class and call init manually:
+  // If you want to use custom settings for your tables, forego the `ajax-table` class and call init manually:
   // $(function() {
   //   ajaxTable.init($('#some-table'), {
   //     cssClasses: { pagination: 'some-class' },
@@ -16,6 +18,19 @@ var ajaxTable = (function($) {
     $('table.ajax-table').each(function() {
       init($(this));
     });
+
+    $('body').on('submit', 'form.ajax-table-search', function(e) {
+      var $form = $(this);
+      search($('#'+$form.data('ajax-table-id')), $form.find('input.ajax-table-search-input').val());
+      e.preventDefault();
+    });
+
+    $('body').on('click', '.ajax-table-reset', function(e) {
+      var $form = $(this).closest('form.ajax-table-search');
+      $form.find('input.ajax-table-search-input').val('');
+      resetTable($('#'+$form.data('ajax-table-id')));
+      e.preventDefault();
+    });
   });
   
   /* public */
@@ -27,6 +42,20 @@ var ajaxTable = (function($) {
     loadTable($table);
     initSorting($table);
   };
+
+  // Filter table records against submitted keywords
+  var search = function($table, val) {
+    $table.data('page', 1);
+    $table.data('search', val);
+    loadTable($table);
+  };
+
+  // Reset table to an unpaginated and unfiltered state
+  var resetTable = function($table) {
+    $table.data('page', 1);
+    $table.removeData('search');
+    loadTable($table);
+  };
   
   /* private */
 
@@ -45,6 +74,7 @@ var ajaxTable = (function($) {
     // @note Querystring param keys match up with those used by ajax_table.rb
     params: {
       page: 'page',
+      search: 'search',
       sortColumn: 'sort',
       sortDirection: 'direction'
     },
@@ -56,12 +86,13 @@ var ajaxTable = (function($) {
     }
   };
 
-  // Load and render table, based on current sort and page
+  // Load and render table, based on current page, sort, and search filter
   var loadTable = function($table) {
     params = {};
-    params[config.params.page] = $table.data('page');
-    params[config.params.sortColumn] = $table.data('sort-column');
+    params[config.params.page]          = $table.data('page');
+    params[config.params.sortColumn]    = $table.data('sort-column');
     params[config.params.sortDirection] = $table.data('sort-direction');
+    params[config.params.search]        = $table.data('search');
     
     var request = $.ajax({
       url: $table.data('source'),
@@ -80,14 +111,14 @@ var ajaxTable = (function($) {
   // @example `<th data-sort-column="email">Email</th>`
   var initSorting = function($table) {
     $table.find('th[data-sort-column]').on('click', function() {
-      // Set direction based on prior and clicked sort column
+      // Reset pagination
+      $table.data('page', 1);
+      // Set direction based on prior and just-clicked sort column
       var sortColumn = $(this).data('sort-column');
       var direction = ($table.data('sort-column') == sortColumn && $table.data('sort-direction') == 'asc') ? 'desc' : 'asc';
       $table.data('sort-direction', direction);
       // Set new sort column
       $table.data('sort-column', sortColumn);
-      // Always reset page to 1 when re-sorting
-      $table.data('page', 1);
       // Remove and re-insert sort icon
       $table.find('th i.' + config.cssClasses.sort).remove();
       var $i = $('<i/>', { class: config.cssClasses.sort + ' ' + (direction == 'asc' ? config.cssClasses.sortAsc : config.cssClasses.sortDesc) });
@@ -121,7 +152,7 @@ var ajaxTable = (function($) {
         $td.append($count);
         $count.html(config.text.count.replace('{count}', pagination.count).replace('{total_count}', pagination.total_count));
       }
-      // Pagination controls
+      // Build pagination controls
       var pageCount = Math.ceil(pagination.total_count / pagination.per_page);
       var currentPage = $table.data('page');
       var $ul = $('<ul/>', { class: config.cssClasses.pagination });
@@ -140,7 +171,7 @@ var ajaxTable = (function($) {
         var nextPage = currentPage+1;
         $ul.append('<li><a href="#" data-page=' + nextPage + '>' + config.text.nextPage + '</a></li>');
       }
-      // Bind the pagination controls
+      // Bind pagination controls
       $table.find('ul.' + config.cssClasses.pagination.split(' ').join('.') + ' a').on('click', function(e) {
         $table.data('page', $(this).data('page'));
         loadTable($table);
@@ -150,7 +181,9 @@ var ajaxTable = (function($) {
   };
 
   return {
-    init: init
+    init: init,
+    search: search,
+    resetTable: resetTable
   }
 
 })(jQuery);

data/app/controllers/concerns/ajax_table_actions.rb

@@ -3,7 +3,7 @@ module AjaxTableActions
 
   private
 
-  # before_action that sets @page and @order instance variables based off ajax_table params `sort` and `direction`
+  # before_action that sets @search, @page and @order instance variables based off ajax_table params `search`, sort` and `direction`
   #
   # @example With sortable columns
   #   before_action -> { set_ajax_table(columns: %w[name email], default_column: "name", default_direction: "asc") }
@@ -16,8 +16,6 @@ module AjaxTableActions
   # @option options [String] default_column       Default sort column
   # @option options [String] default_direction    Default sort direction
   def set_ajax_table(options = {})
-    @page = [params[:page].to_i, 1].max
-
     unless options.empty?
       column = (options[:columns] && options[:columns].detect {|column| column == params[:sort]}) || options[:default_column]
       direction = %w[asc desc].include?(params[:direction]) ? params[:direction] : options[:default_direction]
@@ -25,6 +23,8 @@ module AjaxTableActions
     column ||= 'id'
     direction ||= 'asc'
     @order = "#{column} #{direction}"
+    @page = [params[:page].to_i, 1].max
+    @search = params[:search]
   end
 
 end

data/lib/ajax_table_rails/version.rb

@@ -1,3 +1,3 @@
 module AjaxTableRails
-  VERSION = "0.0.1"
+  VERSION = "0.0.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ajax_table_rails
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
 platform: ruby
 authors:
 - Yuval Kordov
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-01-28 00:00:00.000000000 Z
+date: 2014-01-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails