effective_datatables 4.7.16 → 4.8.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0782f0833ce459c31e724f049f4819e6276c4464c85822d9140f254747cde9cc'
-  data.tar.gz: 542aeb3d78e19c1dc8dff1adf8b7b6965c3a2b7d1a906c26560a42013a8c0e66
+  metadata.gz: cb1dc8f3ac21b885c37e56552192568b059350efcdcd7bd79784d87d91a4bee3
+  data.tar.gz: 46094ee0a00e9246b8dde73c2c9ab4f531c84a287f2cd7db7da467cc0dab6d92
 SHA512:
-  metadata.gz: 90302ac7327123ce9e0a2520d70030ec8eb905c508bb15329641ae90210b5a7018723076b2c421150e289c7e2cc4b90193b8076d6bc5a5cb239c0864b4eaed5b
-  data.tar.gz: 2ebeed000e1e53e6948d7832c750322177c3c13db53ce61f2d0049ece7589b81499862b04ea760963a8e8c70228b7920efc3df6924980a58d945c4ac632ee497
+  metadata.gz: 51f91cf414121df572748ce03da5732b53011ad113db667b95284276f9ec628ec12ff0f8f614567ab88c770f9fa674059c6b8ca9a1ab1a5701e4dd8dbd509c2f
+  data.tar.gz: 1fbacd63b25ba9ba0556ccfec605a07ff5a3c6e5ddfc8da6dc723e66bfc4a72cb0d9c97d796a4acdb419e7fa5d1a2c8b8ec760bb4df77dbcee9b79708fce235d

data/MIT-LICENSE

@@ -1,4 +1,4 @@
-Copyright 2019 Code and Effect Inc.
+Copyright 2021 Code and Effect Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

data/README.md

@@ -8,7 +8,7 @@ Does the right thing with searching sql columns as well as computed values from
 
 Displays links to associated edit/show/destroy actions based on `current_user` authorized actions.
 
-Other features include aggregate (total/average) footer rows, bulk actions, show/hide columns, responsive collapsing columns and Google charts.
+Other features include aggregate (total/average) footer rows, bulk actions, show/hide columns, responsive collapsing columns, google charts, and inline crud.
 
 This gem includes the jQuery DataTables assets.
 
@@ -54,7 +54,8 @@ Please check out [Effective Datatables 3.x](https://github.com/code-and-effect/e
     * [bulk_action](#bulk_action_divider)
     * [bulk_download](#bulk_download)
     * [bulk_action_content](#bulk_action_content)
-  * [charts](#charts)
+  * [Charts](#charts)
+  * [Inline](#inline)
   * [Extras](#extras)
   * [Advanced Search and Sort](#advanced-search-and-sort)
 * [Addtional Functionality](#additional-functionality)
@@ -453,7 +454,7 @@ The `datatable do ... end` block configures a table of data.
 
 Initialize the datatable in your controller or view, `@datatable = PostsDatatable.new(self)`, and render it in your view `<%= render_datatable(@datatable) %>`
 
-### col
+## col
 
 This is the main DSL method that you will interact with.
 
@@ -526,7 +527,7 @@ You can also use the joined syntax, `col 'user.email'` to create a column for ju
 
 This feature is only working with `belongs_to` and you need to add the `.joins(:user)` to the collection do ... end block yourself.
 
-### val
+## val
 
 Shorthand for value, this command also creates a column on the datatable.
 
@@ -548,7 +549,7 @@ This is implemented as a full Array search/sort and is much slower for large dat
 
 The `.format do ... end` block can then be used to apply custom formatting.
 
-### bulk_actions_col
+## bulk_actions_col
 
 Creates a column of checkboxes for use with the `bulk_actions` section.
 
@@ -558,7 +559,7 @@ Use these checkboxes to select all / none / one or more rows for the `bulk_actio
 
 You can only have one `bulk_actions_col` per datatable.
 
-### actions_col
+## actions_col
 
 When working with an ActiveRecord based collection, this column will consider the `current_user`'s authorization, and generate links to edit, show and destroy actions for any collection class.
 
@@ -596,7 +597,7 @@ Any `data-remote` actions will be hijacked and performed as inline ajax by datat
 
 If you'd like to opt-out of this behavior, use `actions_col(inline: false)` or add `data-inline: false` to your action link.
 
-### length
+## length
 
 Sets the default number of rows per page. Valid lengths are `5`, `10`, `25`, `50`, `100`, `250`, `500`, `:all`
 
@@ -606,7 +607,7 @@ When not specified, effective_datatables uses the default as per the `config/ini
 length 100
 ```
 
-### order
+## order
 
 Sets the default order of table rows. The first argument is the column, the second the direction.
 
@@ -618,7 +619,7 @@ When not specified, effective_datatables will sort by the first defined column.
 order :created_at, :asc|:desc
 ```
 
-### reorder
+## reorder
 
 Enables drag-and-drop row re-ordering.
 
@@ -636,7 +637,7 @@ reorder :position
 
 Using `reorder` will sort the collection by this field and disable all other column sorting.
 
-### aggregate
+## aggregate
 
 The `aggregate` command inserts a row in the table's `tfoot`.
 
@@ -681,7 +682,7 @@ The form is submitted by an AJAX POST action, or, in some advanced circumstances
 
 Initialize the datatable in your controller or view, `@datatable = PostsDatatable.new(self)`, and render its filters anywhere with `<%= render_datatable_filters(@datatable) %>`.
 
-### scope
+## scope
 
 All defined scopes are rendered as a single radio button form field. Works great with the [effective_form_inputs](https://github.com/code-and-effect/effective_form_inputs) gem.
 
@@ -705,7 +706,7 @@ class Post < ApplicationRecord | ActiveRecord::Base
 end
 ```
 
-### filter
+## filter
 
 Each filter has a name and a default/fallback value. If the form is submitted blank, the default values are used.
 
@@ -758,7 +759,7 @@ Creates a single dropdown menu with a link to each action, download or content.
 
 Along with this section, you must put a `bulk_actions_col` somewhere in your `datatable do ... end` section.
 
-### bulk_action
+## bulk_action
 
 Creates a link that becomes clickable when one or more checkbox/rows are selected as per the `bulk_actions_col` column.
 
@@ -814,11 +815,11 @@ def approve!
 end
 ```
 
-### bulk_action_divider
+## bulk_action_divider
 
 Inserts a menu divider `<li class='divider' role='separator'></li>`
 
-### bulk_download
+## bulk_download
 
 So it turns out there are some http issues with using an AJAX action to download a file.
 
@@ -859,7 +860,7 @@ def bulk_export_report
 end
 ```
 
-### bulk_action_content
+## bulk_action_content
 
 Blindly inserts content into the dropdown.
 
@@ -873,12 +874,16 @@ end
 
 Don't actually use this.
 
-## charts
+# Charts
 
 Create a [Google Chart](https://developers.google.com/chart/interactive/docs/quick_start) based on your searched collection, filters and attributes.
 
 No javascript required. Just use the `chart do ... end` block and return an Array of Arrays.
 
+The first collection, `collection` is the raw results as returned from the `collection do` block.
+
+The second collection, `searched_collection` is the results after the table's search columns have been applied, but irregardless of pagination.
+
 ```ruby
 charts do
   chart :breakfast, 'BarChart' do |collection|
@@ -894,6 +899,18 @@ charts do
       [date.strftime('%F'), posts.length]
     end
   end
+
+  chart :posts_per_user, 'ColumnChart' do |collection, searched_collection|
+    measured_posts = if search.present?
+      ["Posts with #{search.map { |k, v| k.to_s + ' ' + v.to_s }.join(',')}", searched_collection.length]
+    else
+      ['All Posts', collection.length]
+    end
+
+    [['Posts', 'Count'], measured_posts] +
+    searched_collection.group_by(&:user).map { |user, posts| [user.last_name, posts.length] }
+  end
+
 end
 ```
 
@@ -914,11 +931,169 @@ All options passed to `chart` are used to initialize the chart javascript.
 
 By default, the only package that is loaded is `corechart`, see the `config/initializers/effective_datatables.rb` file to add more packages.
 
-## Extras
+# Inline
+
+Any datatable can be used as an inline datatable, to create, update and destroy resources without leaving the current page.
+
+If your datatable is already working with `actions_col` and being rendered from an `Effective::CrudController` controller, all you need to do is change your view from `render_datatable(@datatable)` to `render_datatable(@datatable, inline: true)`.
+
+Click here for a [Inline Live Demo](https://effective-datatables-demo.herokuapp.com/things) and here for an [Inline Code Example](https://github.com/code-and-effect/effective_datatables_demo)
+(only the `thing` data model and `things_datatable` are being used inline)
+
+To use effective_datatables as an inline CRUD builder, you will be relying heavily on [effective_resources](https://github.com/code-and-effect/effective_resources) which is a dependency of this gem. I would also recommend you install [effective_developer](https://github.com/code-and-effect/effective_developer) to get access to some scaffolds and generators. It's not required but I'm gonna use them in this example.
+
+Here is how I build rails models for inline datatable CRUD operations:
+
+1. Create a new model file `app/models/thing.rb`:
+
+```ruby
+class Thing < ApplicationRecord
+  belongs_to :user
+
+  effective_resource do
+    title           :string
+    description     :text
+    timestamps
+  end
+
+  scope :deep, -> { includes(:user) }
+  scope :sorted, -> { order(:title) }
+
+  def to_s
+    title
+  end
+end
+```
+
+The `effective_resource do` block comes from the [effective_resources](https://github.com/code-and-effect/effective_resources) gem and is used to build any permitted_params.
+
+2. Generate a migration. Run `rails generate effective:migration things` to create a migration based off the model file then `rails db:migrate`.
+
+3. Scaffold the rest. Run `rails generate effective:scaffold_controller things` which will create:
+
+- A controller `app/controllers/things_controller.rb`:
+
+```ruby
+class ThingsController < ApplicationController
+  include Effective::CrudController
+end
+```
+
+The Effective::CrudController comes from [effective_resources](https://github.com/code-and-effect/effective_resources) gem and handles the standard 7 CRUD actions and member and collection actions. It is opinionated code that follows rails conventions. It considers the `routes.rb` and `ability.rb` or other authorization, to find all available actions.
+
+- A datatable `app/datatables/things_datatable.rb`:
+
+```ruby
+class ThingsDatatable < Effective::Datatable
+  datatable do
+    col :title
+    col :description
+    actions_col
+  end
+
+  collection do
+    Thing.deep.all
+  end
+end
+```
+
+This is an ordinary datatable. As long as it's an ActiveRecord collection, inline crud will work.
+
+- A view partial `app/views/things/_thing.html.haml`:
+
+```ruby
+%table.table
+  %tbody
+    %tr
+      %th Title
+      %td= thing.title
+    %tr
+      %th Description
+      %td= thing.description
+```
+
+This file is what rails uses when you call `render(thing)` and what datatables uses for the inline `show` action. It's important that its called `_thing.html`.
+
+- A form partial `app/views/things/_form.html.haml`:
+
+```ruby
+= effective_form_with(model: thing) do |f|
+  = f.text_field :title
+  = f.text_area :description
+  = f.submit
+```
+
+The `effective_form_with` comes from [effective_bootstrap](https://github.com/code-and-effect/effective_bootstrap) gem and is a drop-in replacement for the newer `form_with` syntax. It's really good, you should use it, but an ordinary `form_with` will work here just fine.
+
+This `_form.html` is an effective gems convention. This file must exist for your resource.
+
+- A resources entry in `config/routes.rb`:
+
+```ruby
+Rails.application.routes.draw do
+  resources :things do
+    post :approve, on: :member
+    post :reject, on: :member
+  end
+end
+```
+
+Above we have `resources :things` for the 7 crud actions. And we add two more member actions, which datatables will call `approve!` or `reject!` on thing.
+
+
+4. Render in the view. Create an `app/views/things/index.html.haml` and call `render_datatable(@datatable, inline: true)` or `render_inline_datatable(@datatable).
+
+```ruby
+= render_datatable(@datatable, inline: true)
+```
+
+Your datatable should now have New, Show, Edit, Approve and Reject buttons. Click them for inline functionality.
+
+## Troubleshooting Inline
+
+If things aren't working, try the following:
+
+- Double check your javascripts:
+
+```ruby
+//= require jquery3
+//= require popper
+//= require bootstrap
+//= require effective_bootstrap
+//= require effective_datatables
+//= require jquery_ujs
+```
+
+The inline functionality requires one of sprockets jquery_ujs, sprockets rails_ujs or webpack @rails/ujs libraries.
+
+- Double check your stylesheets:
+
+```ruby
+@import 'bootstrap';
+@import 'effective_bootstrap';
+@import 'effective_datatables';
+```
+
+- Make sure your datatable is not being rendered inside a `<form>...</form>` tag. It will display a javascript console error and won't work.
+
+- Double check your `resources :things` are in `routes.rb` in the same namespace as the controller, and that you have authorization for those actions in `ability.rb` or whatever your `config/initializers/effective_datatables.rb` `config.authorization_method` returns.
+
+## A note on how it works
+
+We use good old `rails_ujs` for all inline actions.
+
+When inline, any of the actions_col actions, as well as the New button, will be changed into `data-remote: true` actions.
+
+The [inline_crud javascript](https://github.com/code-and-effect/effective_datatables/blob/master/app/assets/javascripts/effective_datatables/inline_crud.js.coffee) handles fetching the form, or view partial and expanding/collapsing the appropriate row of the datatable.
+
+When an inline action is clicked, effective_datatables will make an AJAX request to the server, which could be received by an `Effective::CrudController` that will handle the `.js` format, and respond_with the appropriate [rails_ujs .js.erb views](https://github.com/code-and-effect/effective_resources/tree/master/app/views/application).
+
+
+# Extras
 
 The following commands don't quite fit into the DSL, but are present nonetheless.
 
-### simple
+## simple
 
 To render a simple table, without pagination, sorting, filtering, export buttons, per page, and default visibility:
 
@@ -926,7 +1101,7 @@ To render a simple table, without pagination, sorting, filtering, export buttons
 <%= render_datatable(@datatable, simple: true) %>
 ```
 
-### index
+## index
 
 If you just want to render a datatable and nothing else, there is a quick way to skip creating a view:
 
@@ -940,13 +1115,13 @@ end
 
 will render `views/effective/datatables/index` with the assigned datatable.
 
-## Advanced Search and Sort
+# Advanced Search and Sort
 
 The built-in search and ordering can be overridden on a per-column basis.
 
 The only gotcha here is that you must be aware of the type of collection.
 
-### With ActiveRecord collection
+## With ActiveRecord collection
 
 In the case of a `col` and an ActiveRecord collection:
 
@@ -978,7 +1153,7 @@ If `column[:sql_column].blank?` then this `col` has fallen back to being a `val`
 
 Try adding `col :post_category, sql_column: 'post_categories.title'`
 
-### With Array collection
+## With Array collection
 
 And in the case of a `col` with an Array collection, or any `val`:
 
@@ -1017,7 +1192,7 @@ end
 
 The search and sort for each column will be merged together to form the final results.
 
-### Default search collection
+## Default search collection
 
 When using a `col :comments` type belongs_to or has_many column, a search collection for that class will be loaded.
 
@@ -1139,6 +1314,22 @@ def finalize(collection)
 end
 ```
 
+## Render outside of view
+
+You can render a datatable outside the view.
+
+Anything you pass to the `rendered` method is treated as view/request params.
+
+You can test filters and scopes by passing them here.
+
+```
+post = Post.create!
+datatable = PostsDatatable.new.rendered(end_date: Time.zone.now+2.days, current_user_id: 1)
+
+assert_equal 1, datatable.collection.count
+assert_equal [post], datatable.collection
+```
+
 ## Authorization
 
 All authorization checks are handled via the config.authorization_method found in the `config/initializers/effective_datatables.rb` file.

data/app/assets/javascripts/effective_datatables/flash.js.coffee

@@ -16,7 +16,7 @@ flash = (message, status = '') ->
   timeout = $processing.data('timeout')
   clearTimeout(timeout) if timeout
 
-  delay = (if status == 'danger' then 4000 else 1500)
+  delay = (if status == 'danger' then 4000 else 1000)
 
   $processing.html(message).data('timeout', setTimeout( =>
       $processing.html('Processing...')

data/app/assets/javascripts/effective_datatables/initialize.js.coffee

@@ -5,6 +5,9 @@ initializeDataTables = (target) ->
     buttons_export_columns = options['buttons_export_columns'] || ':not(.col-actions)'
     reorder = datatable.data('reorder')
 
+    if datatable.data('inline') && datatable.closest('form').length > 0
+      console.error('inline datatable cannot work inside a form')
+
     if options['buttons'] == false
       options['buttons'] = []
 
@@ -49,7 +52,7 @@ initializeDataTables = (target) ->
       displayStart: datatable.data('display-start')
       iDisplayLength: datatable.data('display-length')
       language: datatable.data('language')
-      lengthMenu: [[5, 10, 25, 50, 100, 250, 500, 9999999], ['5', '10', '25', '50', '100', '250', '500', 'All']]
+      lengthMenu: [[5, 10, 25, 50, 100, 250, 500, 9999999], ['5', '10', '25', '50', '100', '250', '500', datatable.data('all-label')]]
       order: datatable.data('display-order')
       processing: true
       responsive: true
@@ -77,7 +80,7 @@ initializeDataTables = (target) ->
               filter_name = name.replace('filters[', '').substring(0, name.length-9)
 
               params['filter'][filter_name] = $form.find("input[name='#{name}']:checked").val()
-              
+
             else if $input.attr('id')
               filter_name = $input.attr('id').replace('filters_', '')
               params['filter'][filter_name] = $input.val()
@@ -131,7 +134,7 @@ initializeDataTables = (target) ->
       if typeof(google) != 'undefined' && typeof(google.visualization) != 'undefined'
         $.each charts, (name, data) =>
           $(".effective-datatables-chart[data-name='#{name}']").each (_, obj) =>
-            chart = new google.visualization[data['type']](obj)
+            chart = new google.visualization[data['as']](obj)
             chart.draw(google.visualization.arrayToDataTable(data['data']), data['options'])
 
     # Appends the search html, stored in the column definitions, into each column header
@@ -162,14 +165,23 @@ initializeDataTables = (target) ->
           $input.on 'change', (event) -> dataTableSearch($(event.currentTarget))
         else if $input.is('input')
           $input.delayedChange ($input) -> dataTableSearch($input)
-          $input.on('paste', -> dataTableSearch($input))
 
     # Do the actual search
     dataTableSearch = ($input) ->   # This is the function called by a select or input to run the search
       return if $input.is(':invalid')
 
       table = $input.closest('table.dataTable')
-      table.DataTable().column("#{$input.data('column-name')}:name").search($input.val()).draw()
+
+      value = $input.val()
+
+      if Array.isArray(value)
+        # Nothing
+      else if value.startsWith('"') && value.endsWith('"')
+        value = value.substring(1, value.length-1)
+      else
+        value = $.trim(value)
+
+      table.DataTable().column("#{$input.data('column-name')}:name").search(value).draw()
 
     if reorder
       init_options['rowReorder'] = { selector: 'td.col-_reorder', snapX: true, dataSrc: datatable.data('reorder-index') }
@@ -188,6 +200,7 @@ initializeDataTables = (target) ->
 
     table.addClass('initialized')
     table.children('thead').trigger('effective-bootstrap:initialize')
+    table.children('thead').find('input[autofocus]').first().focus()
     true
 
 destroyDataTables = ->

data/app/assets/javascripts/effective_datatables/inline_crud.js.coffee

@@ -1,15 +1,34 @@
 # To achieve inline crud, we use rails' data-remote links, and override their behaviour when inside a datatable
 # This works with EffectiveForm.remote_form which is part of the effective_bootstrap gem.
 
-# We click the New/Edit/Action button from the col-actions
-$(document).on 'ajax:beforeSend', '.dataTables_wrapper .col-actions', (e, xhr, settings) ->
-  $action = $(e.target)
-  $table = $(e.target).closest('table')
+# https://github.com/rails/jquery-ujs/wiki/ajax
+# https://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#rails-ujs-event-handlers
+
+$(document).on 'ajax:before', '.dataTables_wrapper .col-actions', (event) ->
+  $action = $(event.target)
+  $table = $(event.target).closest('table')
 
   return true if ('' + $action.data('inline')) == 'false'
 
-  $params = $.param({_datatable_id: $table.attr('id'), _datatable_attributes: $table.data('attributes'), _datatable_action: true })
-  settings.url += (if settings.url.indexOf('?') == -1 then '?' else '&') + $params
+  $params = $.param(
+    {
+      _datatable_id: $table.attr('id'),
+      _datatable_attributes: $table.data('attributes'),
+      _datatable_action: true
+    }
+  )
+
+  $action.attr('data-params', $params)
+  true
+
+# We click the New/Edit/Action button from the col-actions
+$(document).on 'ajax:beforeSend', '.dataTables_wrapper .col-actions', (event, xhr, settings) ->
+  [xhr, settings] = event.detail if event.detail # rails/ujs
+
+  $action = $(event.target)
+  $table = $(event.target).closest('table')
+
+  return true if ('' + $action.data('inline')) == 'false'
 
   if $action.closest('.effective-datatables-inline-row,table.dataTable').hasClass('effective-datatables-inline-row')
     # Nothing.
@@ -22,6 +41,8 @@ $(document).on 'ajax:beforeSend', '.dataTables_wrapper .col-actions', (e, xhr, s
 
 # We have either completed the resource action, or fetched the inline form to load.
 $(document).on 'ajax:success', '.dataTables_wrapper .col-actions', (event, data) ->
+  [data, status, xhr] = event.detail if event.detail # rails/ujs
+
   $action = $(event.target)
 
   return true if ('' + $action.data('inline')) == 'false'
@@ -54,12 +75,22 @@ $(document).on 'ajax:error', '.dataTables_wrapper', (event) ->
   EffectiveForm.remote_form_flash = ''
   true
 
-# Submitting an inline datatables form
-$(document).on 'ajax:beforeSend', '.dataTables_wrapper .col-inline-form', (e, xhr, settings) ->
-  $table = $(e.target).closest('table')
+## Now for the fetched form. We add the datatables params attributes
+
+$(document).on 'ajax:before', '.dataTables_wrapper .col-inline-form', (event) ->
+  $action = $(event.target)
+  $form = $action.closest('form')
+  $table = $action.closest('table')
+
+  if $form.find('input[name=_datatable_id]').length == 0
+    $('<input>').attr(
+      {type: 'hidden', name: '_datatable_id', value: $table.attr('id')}
+    ).appendTo($form)
 
-  $params = $.param({_datatable_id: $table.attr('id'), _datatable_attributes: $table.data('attributes') })
-  settings.url += (if settings.url.indexOf('?') == -1 then '?' else '&') + $params
+  if $form.find('input[name=_datatable_attributes]').length == 0
+    $('<input>').attr(
+      {type: 'hidden', name: '_datatable_attributes', value: $table.data('attributes')}
+    ).appendTo($form)
 
   true
 
@@ -92,7 +123,6 @@ beforeNew = ($action) ->
 
   # Append spinner and show Processing
   $th.append($table.data('spinner'))
-  $table.DataTable().flash()
   $table.one 'draw.dt', (event) ->
     $th.find('a').show().siblings('svg').remove() if event.target == event.currentTarget
 
@@ -121,7 +151,6 @@ beforeEdit = ($action) ->
 
   # Append spinner and show Processing
   $td.append($table.data('spinner'))
-  $table.DataTable().flash()
 
 afterEdit = ($action) ->
   $tr = $action.closest('tr')

data/app/assets/javascripts/effective_datatables/reorder.js.coffee

@@ -8,7 +8,14 @@ reorder = (event, diff, edit) ->
   return unless oldNode? && newNode?
 
   url = @context[0].ajax.url.replace('.json', '/reorder.json')
-  data = {'reorder[id]': oldNode.data('reorder-resource'), 'reorder[old]': oldNode.val(), 'reorder[new]': newNode.val(), attributes: $table.data('attributes') }
+
+  data = {
+    'authenticity_token': $('head').find("meta[name='csrf-token']").attr('content'),
+    'reorder[id]': oldNode.data('reorder-resource'),
+    'reorder[old]': oldNode.val(),
+    'reorder[new]': newNode.val(),
+    'attributes': $table.data('attributes')
+  }
 
   @context[0].rowreorder.c.enable = false
 
@@ -40,4 +47,3 @@ $(document).on 'click', '.dataTables_wrapper a.buttons-reorder', (event) ->
     $table.addClass('reordering')
 
   column.visible(!column.visible())
-

data/app/assets/javascripts/effective_datatables/reset.js.coffee

@@ -1,11 +1,32 @@
 $(document).on 'click', '.dataTables_wrapper a.buttons-reset-search', (event) ->
   event.preventDefault() # prevent the click
 
+  # Reset the HTML
   $table = $(event.currentTarget).closest('.dataTables_wrapper').find('table.dataTable').first()
   $thead = $table.children('thead').first()
 
-  $thead.find('input').val('').removeAttr('checked').removeAttr('selected')
+  # Reset all inputs
   $thead.find('select').val('').trigger('change.select2')
 
-  $table.DataTable().search('').columns().search('').draw()
+  $inputs = $thead.find('input')
+  $inputs.val('').removeAttr('checked').removeAttr('selected')
+
+  # Reset delayedChange
+  $.each $inputs, (input) =>
+    $input = $(input)
+    if ($input.delayedChange.oldVal)
+      $input.delayedChange.oldVal = undefined
+
+  # Reset the datatable
+  datatable = $table.DataTable()
+
+  # Reset search
+  datatable.search('').columns().search('')
+
+  # Reset to default visibility
+  $.each $table.data('default-visibility'), (index, visible) =>
+    datatable.column(index).visible(visible, false)
+
+  # Don't pass up the click
+  false
 

data/app/assets/javascripts/vendor/jquery.delayedChange.js

@@ -14,11 +14,10 @@
 
     return this.each(function() {
       var element = $(this);
-      element.keyup(function() {
+      element.on('keyup paste', function() {
         clearTimeout(timer);
         timer = setTimeout(function() {
           var newVal = element.val();
-          newVal = $.trim(newVal);
           if (element.delayedChange.oldVal != newVal) {
             element.delayedChange.oldVal = newVal;
             o.onChange.call(this, element);