app/assets/javascripts/ajaxtable.js in ajax_table_rails-0.0.1 vs app/assets/javascripts/ajaxtable.js in ajax_table_rails-0.0.2

@@ -1,10 +1,12 @@
 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' },
   //     text: { count: null },
   //     ...
@@ -14,10 +16,23 @@
   // @see config Available settings
   $(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 */
 
   // Load and build initial table, and bind static events
@@ -25,10 +40,24 @@
     $.extend(true, config, options);
     $table.data('page', 1);
     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 */
 
   // Default config
   // All of these settings can be overriden by manually calling `init`
@@ -43,10 +72,11 @@
       sortDesc: 'fa fa-sort-down' // Sort icon descending indicator, defaults to use FontAwesome
     },
     // @note Querystring param keys match up with those used by ajax_table.rb
     params: {
       page: 'page',
+      search: 'search',
       sortColumn: 'sort',
       sortDirection: 'direction'
     },
     // To not display count, pass `text.count: null`
     text: {
@@ -54,16 +84,17 @@
       nextPage: '»',
       previousPage: '«'
     }
   };
 
-  // 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'),
       data: $.extend({ format: 'json' }, params),
       type: 'GET',
@@ -78,18 +109,18 @@
   // Bind table headers to sort with direction
   // @note To enable sorting on a header, add a `data-sort-column` attribute with the desired column name.
   // @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) });
       $(this).append($i);
       // Reload table
@@ -119,11 +150,11 @@
       if (config.text.count) {
         var $count = $('<span/>', { class: config.cssClasses.count });
         $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 });
       $td.append($ul);
       if (currentPage > 1) {
@@ -138,19 +169,21 @@
       }
       if (currentPage < pageCount) {
         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);
         e.preventDefault();
       });
     }
   };
 
   return {
-    init: init
+    init: init,
+    search: search,
+    resetTable: resetTable
   }
 
 })(jQuery);
\ No newline at end of file