effective_datatables 3.7.10 → 4.0.0

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

@@ -1,66 +1,50 @@
 #### Checkbox toggling and Bulk Actions dropdown disabling
 
-$(document).on 'change', ".dataTables_wrapper input[data-role='bulk-action']", (event) ->
+$(document).on 'change', "input[data-role='bulk-actions-resource']", (event) ->
   $wrapper = $(event.currentTarget).closest('.dataTables_wrapper')
 
-  $wrapper.find("input[data-role='bulk-actions']").prop('checked', false)
-  toggleDropdown($wrapper)
+  $wrapper.find("input[data-role='bulk-actions-all']").prop('checked', false)
+  toggleClosestBulkActionsButton($wrapper)
 
-$(document).on 'change', ".dataTables_wrapper input[data-role='bulk-actions']", (event) ->
+$(document).on 'change', "input[data-role='bulk-actions-all']", (event) ->
   $wrapper = $(event.currentTarget).closest('.dataTables_wrapper')
-  $resources = $wrapper.find("input[data-role='bulk-action']")
+  $resources = $wrapper.find("input[data-role='bulk-actions-resource']")
 
   if $(event.currentTarget).is(':checked')
     $resources.prop('checked', true)
   else
     $resources.prop('checked', false)
 
-  toggleDropdown($wrapper)
+  toggleClosestBulkActionsButton($wrapper)
 
-toggleDropdown = ($wrapper) ->
+toggleClosestBulkActionsButton = ($wrapper) ->
   $bulkActions = $wrapper.children().first().find('.buttons-bulk-actions').children('button')
 
-  if $wrapper.find("input[data-role='bulk-action']:checked").length > 0
+  if $wrapper.find("input[data-role='bulk-actions-resource']:checked").length > 0
     $bulkActions.removeAttr('disabled')
   else
     $bulkActions.attr('disabled', 'disabled')
 
-restoreSelected = ($table, selected) ->
-  $bulkActions = $table.closest('.dataTables_wrapper').children().first().find('.buttons-bulk-actions').children('button')
-  present = false
-
-  if selected && selected.length > 0
-    $table.find("input[data-role='bulk-action']").each (_, input) ->
-      $input = $(input)
-
-      if selected.indexOf($input.val()) > -1
-        $input.prop('checked', true)
-        present = true
-      else
-        $input.prop('checked', false)
-
-  if present then $bulkActions.removeAttr('disabled') else $bulkActions.attr('disabled', 'disabled')
 
 #### Bulk Action link behaviour
-$(document).on 'click', '.dataTables_wrapper .buttons-bulk-actions a', (event) ->
+$(document).on 'click', '.buttons-bulk-actions a', (event) ->
   event.preventDefault() # prevent the click
 
   $bulkAction = $(event.currentTarget)  # This is a regular <a href=...> tag
   $wrapper = $bulkAction.closest('.dataTables_wrapper')
   $table = $wrapper.find('table.dataTable').first()
   $processing = $table.siblings('.dataTables_processing').first()
-  $selected = $table.find("input[data-role='bulk-action']:checked")
+  $selected = $table.find("input[data-role='bulk-actions-resource']:checked")
 
   url = $bulkAction.attr('href')
   title = $bulkAction.text()
-  download = $bulkAction.data('bulk-download')
-  token = $table.data('authenticity-token')
+  token = $bulkAction.parent('li').data('authenticity-token')
   values = $.map($selected, (input) -> input.getAttribute('value'))
-  method = $bulkAction.data('ajax-method')
+  get_link = $bulkAction.data('bulk-actions-get')
 
   return unless url && values
 
-  if method == 'GET'
+  if get_link
     if url.includes('?')
       window.location.assign(url + '&' + $.param({ids: values}))
     else
@@ -71,36 +55,52 @@ $(document).on 'click', '.dataTables_wrapper .buttons-bulk-actions a', (event) -
   # Disable the Bulk Actions dropdown, so only one can be run at a time
   $bulkAction.closest('button').attr('disabled', 'disabled')
 
-  $table.dataTable().data('bulk-actions-restore-selected-values', values)
+  # Show Processing...
+  $processing.show().data('bulk-actions-processing', true)
 
-  if download # This is a file download
+  if token # This is a file download
     $.fileDownload(url,
       httpMethod: 'POST',
       data: { ids: values, authenticity_token: token }
       successCallback: ->
         success = "Successfully completed #{title} bulk action"
-        $table.one 'draw.dt', (e) -> $(e.target).DataTable().flash(success, 'success') and restoreSelected($(e.target), values)
+        $processing.html(success)
+        $table.dataTable().data('bulk-actions-restore-selected-values', values)
         $table.DataTable().draw()
       failCallback: ->
         error = "An error occured while attempting #{title} bulk action"
-        $table.one 'draw.dt', (e) -> $(e.target).DataTable().flash(error, 'danger') and restoreSelected($(e.target), values)
+        $processing.html(error)
+        alert(error)
+        $table.dataTable().data('bulk-actions-restore-selected-values', values)
         $table.DataTable().draw()
     )
   else # Normal AJAX post
-    $table.dataTable().data('bulk-actions-restore-selected-values', values)
-
-    $.ajax(
-      method: method,
-      url: url,
-      data: { ids: values, authenticity_token: token }
+    $.post(
+      url, { ids: values }
     ).done((response) ->
       success = response['message'] || "Successfully completed #{title} bulk action"
-      $table.one 'draw.dt', (e) -> $(e.target).DataTable().flash(success, 'success') and restoreSelected($(e.target), values)
-
+      $processing.html(success)
     ).fail((response) ->
       error = response['message'] || "An error occured while attempting #{title} bulk action: #{response.statusText}"
-      $table.one 'draw.dt', (e) -> $(e.target).DataTable().flash(error, 'danger') and restoreSelected($(e.target), values)
-
+      $processing.html(error)
+      alert(error)
     ).always((response) ->
+      $table.dataTable().data('bulk-actions-restore-selected-values', values)
       $table.DataTable().draw()
     )
+
+# We borrow the Processing div for our bulk action success/error messages
+# This makes sure that the message is displayed for 1500ms
+$(document).on 'processing.dt', (event, settings, visible) ->
+  return if settings.bDestroying
+
+  $processing = $(event.target).siblings('.dataTables_processing').first()
+  return unless $processing.data('bulk-actions-processing')
+
+  timeout = $processing.show().data('timeout')
+  clearTimeout(timeout) if timeout
+  $processing.data('timeout', setTimeout( =>
+      $processing.html('Processing...').hide()
+      $processing.data('bulk-actions-processing', null)
+    , 1500)
+  )

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

@@ -8,13 +8,16 @@ $(document).on 'column-visibility.dt', (event, settings, index, state) ->
   clearTimeout(timeout) if timeout
   $table.data('timeout', setTimeout( =>
       $table.DataTable().draw()
-      $.event.trigger('page:change')
+      $table.trigger('effective-bootstrap:initialize')
     , 700)
   )
+  true
 
 # Remove empty label (bulk actions) from ColVis dropdown
-$(document).on 'click.dtb-collection', (event) ->
-  $colvis = $('.dt-button-collection:not(.initialized)')
+$(document).on 'click', 'a.buttons-colvis:not(.initialized)', (event) ->
+  $colvis = $('.dt-button-collection')
   return if $colvis.length == 0
 
-  $colvis.addClass('initialized').find('li > a:empty').each -> $(this).parent().remove()
+  $colvis.find('a > span:empty').each -> $(this).parent().remove()
+  $colvis.find('a.buttons-colvisGroup').first().before("<div class='dropdown-divider'></div>")
+  $(event.currentTarget).addClass('initialized')

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

@@ -1,4 +1,3 @@
-# Don't scope by .datatables_wrapper here, because it's out of the wrapper!
 $(document).on 'click', 'a[data-apply-effective-datatables-filters]', (event) ->
   event.preventDefault()
   $form = $(event.currentTarget).closest('.effective-datatables-filters')

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

@@ -1,9 +1,11 @@
-initializeDataTables = (target) ->
-  $(target || document).find('table.effective-datatable:not(.initialized)').each ->
+initializeDataTables = ->
+  $('table.effective-datatable').each ->
+    return if $.fn.DataTable.fnIsDataTable(this)
+
     datatable = $(this)
     options = datatable.data('options') || {}
     buttons_export_columns = options['buttons_export_columns'] || ':not(.col-actions)'
-    reorder = datatable.data('reorder')
+    simple = ('' + datatable.data('simple') == 'true')
 
     if options['buttons'] == false
       options['buttons'] = []
@@ -14,10 +16,10 @@ initializeDataTables = (target) ->
       buttons: [
         {
           extend: 'colvis',
+          text: 'Show / Hide',
           postfixButtons: [
-            { extend: 'colvisGroup', text: 'Show all', show: ':hidden', className: 'buttons-colvisGroup-first'},
-            { extend: 'colvisGroup', text: 'Show none', hide: ':visible' },
-            { extend: 'colvisGroup', text: 'Show default', hide: ':not(.colvis-default)', show: '.colvis-default' }
+            { extend: 'colvisGroup', text: 'Show all', show: ':hidden'},
+            { extend: 'colvisRestore', text: 'Show default'}
           ]
         },
         {
@@ -47,8 +49,9 @@ initializeDataTables = (target) ->
       deferLoading: [datatable.data('display-records'), datatable.data('total-records')]
       deferRender: true
       displayStart: datatable.data('display-start')
+      dom: "<'row'<'col-sm-12 dataTables_buttons'B>><'row'<'col-sm-12'tr>><'row'<'col-sm-6 dataTables_entries'il><'col-sm-6'p>>"
       iDisplayLength: datatable.data('display-length')
-      language: datatable.data('language')
+      language: { 'lengthMenu': '&nbsp;with _MENU_ per page'}
       lengthMenu: [[5, 10, 25, 50, 100, 250, 500, 9999999], ['5', '10', '25', '50', '100', '250', '500', 'All']]
       order: datatable.data('display-order')
       processing: true
@@ -60,33 +63,23 @@ initializeDataTables = (target) ->
         $table = $(api.table().node())
         $form = $(".effective-datatables-filters[aria-controls='#{$table.attr('id')}']").first()
 
-        params['attributes'] = $table.data('attributes')
-        params['authenticity_token'] = $table.data('authenticity-token')
+        params['cookie'] = $table.data('cookie')
 
         if $form.length > 0
           params['scope'] = $form.find("input[name='filters[scope]']:checked").val() || ''
           params['filter'] = {}
 
-          $form.find("select,textarea,input:not([type=submit])").each ->
+          $form.find("select,textarea,input:not([type=submit]):not([name='filters[scope]'])").each ->
             $input = $(this)
-
-            if ['utf8', 'authenticity_token', 'filters[scope]'].includes($input.attr('name'))
-              # Skipped
-            else if $input.attr('type') == 'radio'
-              name = $input.attr('name')
-              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()
+            if $input.attr('id')
+              params['filter'][$input.attr('id').substring(8, $input.attr('id').length)] = $input.val()
 
       serverSide: true
       scrollCollapse: true
       pagingType: 'simple_numbers'
       initComplete: (settings) ->
-        initializeButtons(this.api())
+        initializeReset(this.api())
+        initializeBulkActions(this.api())
         initializeSearch(this.api())
       drawCallback: (settings) ->
         $table = $(this.api().table().node())
@@ -102,21 +95,36 @@ initializeDataTables = (target) ->
           if settings['json']['charts']
             drawCharts($table, settings['json']['charts'])
 
-          $table.children('tbody').trigger('effective-bootstrap:initialize')
+        drawBulkActions($table)
 
     # Copies the bulk actions html, stored in a data attribute on the table, into the buttons area
-    initializeButtons = (api) ->
+    initializeBulkActions = (api) ->
+      $table = $(api.table().node())
+
+      if $table.data('bulk-actions')
+        $table.closest('.dataTables_wrapper').children().first().find('.dt-buttons').prepend($table.data('bulk-actions'))
+
+    initializeReset = (api) ->
       $table = $(api.table().node())
-      $buttons = $table.closest('.dataTables_wrapper').children().first().find('.dt-buttons')
 
       if $table.data('reset')
-        $buttons.prepend($table.data('reset'))
+        $table.closest('.dataTables_wrapper').children().first().find('.dt-buttons').prepend($table.data('reset'))
 
-      if $table.data('reorder')
-        $buttons.prepend($table.data('reorder'))
+    # After we perform a bulk action, we have to re-select the checkboxes manually and do a bit of house keeping
+    drawBulkActions = ($table) ->
+      selected = $table.data('bulk-actions-restore-selected-values')
 
-      if $table.data('bulk-actions')
-        $buttons.prepend($table.data('bulk-actions'))
+      $bulkActions = $table.closest('.dataTables_wrapper').children().first().find('.buttons-bulk-actions').children('button')
+
+      if selected && selected.length > 0
+        $table.find("input[data-role='bulk-actions-resource']").each (_, input) ->
+          $input = $(input)
+          $input.prop('checked', selected.indexOf($input.val()) > -1)
+
+        $bulkActions.removeAttr('disabled')
+        $table.data('bulk-actions-restore-selected-values', [])
+      else
+        $bulkActions.attr('disabled', 'disabled')
 
     drawAggregates = ($table, aggregates) ->
       $tfoot = $table.find('tfoot').first()
@@ -156,13 +164,11 @@ initializeDataTables = (target) ->
 
         $input.parent().on 'click', (event) -> false # Dont order columns when you click inside the input
         $input.parent().on 'mousedown', (event) -> event.stopPropagation() # Dont order columns when you click inside the input
-        $input.parent().on 'keypress', (event) -> event.stopPropagation() # Don't order columns when you type inside the input
 
         if $input.is('select')
           $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
@@ -171,32 +177,22 @@ initializeDataTables = (target) ->
       table = $input.closest('table.dataTable')
       table.DataTable().column("#{$input.data('column-name')}:name").search($input.val()).draw()
 
-    if reorder
-      init_options['rowReorder'] = { selector: 'td.col-_reorder', snapX: true, dataSrc: datatable.data('reorder-index') }
+    if simple
+      init_options['dom'] = "<'row'<'col-sm-12'tr>>" # Just show the table
+      datatable.addClass('simple')
 
     # Let's actually initialize the table now
     table = datatable.dataTable(jQuery.extend(init_options, options))
 
-    # Fix a tabindex issue
-    table.children('tbody').children('tr').children('td[tabindex]').removeAttr('tabindex')
-
     # Apply EffectiveFormInputs to the Show x per page dropdown
     try table.closest('.dataTables_wrapper').find('.dataTables_length select').removeAttr('name').select2(minimumResultsForSearch: 100)
 
-    if reorder
-      table.DataTable().on('row-reorder', (event, diff, edit) -> $(event.target).DataTable().reorder(event, diff, edit))
-
-    table.addClass('initialized')
-    table.children('thead').trigger('effective-bootstrap:initialize')
-    true
-
 destroyDataTables = ->
-  $('.effective-datatables-inline-expanded').removeClass('effective-datatables-inline-expanded')
-  $('table.effective-datatable').each -> try $(this).removeClass('initialized').DataTable().destroy()
+  $('table.effective-datatable').each ->
+    if $.fn.DataTable.fnIsDataTable(this)
+      $(this).DataTable().destroy()
 
 $ -> initializeDataTables()
-$(document).on 'effective-datatables:initialize', (event) -> initializeDataTables(event.currentTarget)
-
 $(document).on 'page:change', -> initializeDataTables()
 $(document).on 'turbolinks:load', -> initializeDataTables()
 $(document).on 'turbolinks:render', -> initializeDataTables()

data/app/assets/javascripts/effective_datatables/overrides.js

@@ -0,0 +1,12 @@
+$.extend(true, $.fn.dataTable.Buttons.defaults, {
+  dom: {
+    button: {
+      className: 'btn btn-link btn-sm'
+    }
+  }
+});
+
+/* Default class modification */
+$.extend($.fn.dataTable.ext.classes, {
+  sWrapper: 'dataTables_wrapper dt-bootstrap4', // Remove container-fluid
+});

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

@@ -1,4 +1,4 @@
-$(document).on 'click', '.dataTables_wrapper a.buttons-reset-search', (event) ->
+$(document).on 'click', 'a.buttons-reset-search', (event) ->
   event.preventDefault() # prevent the click
 
   $table = $(event.currentTarget).closest('.dataTables_wrapper').find('table.dataTable').first()

data/app/assets/javascripts/effective_datatables.js

@@ -2,22 +2,22 @@
 //= require vendor/jquery.fileDownload
 
 //= require dataTables/jquery.dataTables
-//= require dataTables/dataTables.bootstrap
+//= require dataTables/dataTables.bootstrap4
 
 //= require dataTables/buttons/dataTables.buttons
-//= require dataTables/buttons/buttons.bootstrap
+//= require dataTables/buttons/buttons.bootstrap4
 //= require dataTables/buttons/buttons.colVis
 //= require dataTables/buttons/buttons.html5
 //= require dataTables/buttons/buttons.print
 //= require dataTables/responsive/dataTables.responsive
-//= require dataTables/responsive/responsive.bootstrap
+//= require dataTables/responsive/responsive.bootstrap4
 
 //= require effective_datatables/bulk_actions
 //= require effective_datatables/events
 //= require effective_datatables/filters
-//= require effective_datatables/flash
 //= require effective_datatables/reset
 //= require effective_datatables/responsive
+//= require effective_datatables/overrides
 
 //= require effective_datatables/charts
 //= require effective_datatables/initialize

data/app/assets/stylesheets/dataTables/buttons/{buttons.bootstrap.scss → buttons.bootstrap4.css}

@@ -108,6 +108,73 @@ ul.dt-button-collection.dropdown-menu.four-column {
   -o-column-count: 4;
   column-count: 4;
 }
+ul.dt-button-collection.dropdown-menu .dt-button {
+  border-radius: 0;
+}
+
+ul.dt-button-collection {
+  -webkit-column-gap: 8px;
+  -moz-column-gap: 8px;
+  -ms-column-gap: 8px;
+  -o-column-gap: 8px;
+  column-gap: 8px;
+}
+ul.dt-button-collection.fixed {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin-left: -75px;
+  border-radius: 0;
+}
+ul.dt-button-collection.fixed.two-column {
+  margin-left: -150px;
+}
+ul.dt-button-collection.fixed.three-column {
+  margin-left: -225px;
+}
+ul.dt-button-collection.fixed.four-column {
+  margin-left: -300px;
+}
+ul.dt-button-collection > * {
+  -webkit-column-break-inside: avoid;
+  break-inside: avoid;
+}
+ul.dt-button-collection.two-column {
+  width: 300px;
+  padding-bottom: 1px;
+  -webkit-column-count: 2;
+  -moz-column-count: 2;
+  -ms-column-count: 2;
+  -o-column-count: 2;
+  column-count: 2;
+}
+ul.dt-button-collection.three-column {
+  width: 450px;
+  padding-bottom: 1px;
+  -webkit-column-count: 3;
+  -moz-column-count: 3;
+  -ms-column-count: 3;
+  -o-column-count: 3;
+  column-count: 3;
+}
+ul.dt-button-collection.four-column {
+  width: 600px;
+  padding-bottom: 1px;
+  -webkit-column-count: 4;
+  -moz-column-count: 4;
+  -ms-column-count: 4;
+  -o-column-count: 4;
+  column-count: 4;
+}
+ul.dt-button-collection .dt-button {
+  border-radius: 0;
+}
+ul.dt-button-collection.fixed {
+  max-width: none;
+}
+ul.dt-button-collection.fixed:before, ul.dt-button-collection.fixed:after {
+  display: none;
+}
 
 div.dt-button-background {
   position: fixed;
@@ -115,7 +182,7 @@ div.dt-button-background {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 2001;
+  z-index: 999;
 }
 
 @media screen and (max-width: 767px) {

data/app/assets/stylesheets/dataTables/{dataTables.bootstrap.scss → dataTables.bootstrap4.css}

@@ -42,7 +42,7 @@ div.dataTables_wrapper div.dataTables_filter input {
   width: auto;
 }
 div.dataTables_wrapper div.dataTables_info {
-  padding-top: 8px;
+  padding-top: 0.85em;
   white-space: nowrap;
 }
 div.dataTables_wrapper div.dataTables_paginate {
@@ -53,6 +53,7 @@ div.dataTables_wrapper div.dataTables_paginate {
 div.dataTables_wrapper div.dataTables_paginate ul.pagination {
   margin: 2px 0;
   white-space: nowrap;
+  justify-content: flex-end;
 }
 div.dataTables_wrapper div.dataTables_processing {
   position: absolute;
@@ -83,52 +84,61 @@ table.dataTable thead .sorting_desc_disabled {
   cursor: pointer;
   position: relative;
 }
-table.dataTable thead .sorting:after,
+table.dataTable thead .sorting:before, table.dataTable thead .sorting:after,
+table.dataTable thead .sorting_asc:before,
 table.dataTable thead .sorting_asc:after,
+table.dataTable thead .sorting_desc:before,
 table.dataTable thead .sorting_desc:after,
+table.dataTable thead .sorting_asc_disabled:before,
 table.dataTable thead .sorting_asc_disabled:after,
+table.dataTable thead .sorting_desc_disabled:before,
 table.dataTable thead .sorting_desc_disabled:after {
   position: absolute;
-  bottom: 8px;
-  right: 8px;
+  bottom: 0.9em;
   display: block;
-  font-family: 'Glyphicons Halflings';
-  opacity: 0.5;
+  opacity: 0.3;
 }
-table.dataTable thead .sorting:after {
-  opacity: 0.2;
-  content: "\e150";
-  /* sort */
+table.dataTable thead .sorting:before,
+table.dataTable thead .sorting_asc:before,
+table.dataTable thead .sorting_desc:before,
+table.dataTable thead .sorting_asc_disabled:before,
+table.dataTable thead .sorting_desc_disabled:before {
+  right: 1em;
+  content: "\2191";
 }
-table.dataTable thead .sorting_asc:after {
-  content: "\e155";
-  /* sort-by-attributes */
+table.dataTable thead .sorting:after,
+table.dataTable thead .sorting_asc:after,
+table.dataTable thead .sorting_desc:after,
+table.dataTable thead .sorting_asc_disabled:after,
+table.dataTable thead .sorting_desc_disabled:after {
+  right: 0.5em;
+  content: "\2193";
 }
+table.dataTable thead .sorting_asc:before,
 table.dataTable thead .sorting_desc:after {
-  content: "\e156";
-  /* sort-by-attributes-alt */
+  opacity: 1;
 }
-table.dataTable thead .sorting_asc_disabled:after,
+table.dataTable thead .sorting_asc_disabled:before,
 table.dataTable thead .sorting_desc_disabled:after {
-  color: #eee;
+  opacity: 0;
 }
 
 div.dataTables_scrollHead table.dataTable {
   margin-bottom: 0 !important;
 }
 
-div.dataTables_scrollBody > table {
+div.dataTables_scrollBody table {
   border-top: none;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
-div.dataTables_scrollBody > table > thead .sorting:after,
-div.dataTables_scrollBody > table > thead .sorting_asc:after,
-div.dataTables_scrollBody > table > thead .sorting_desc:after {
+div.dataTables_scrollBody table thead .sorting:after,
+div.dataTables_scrollBody table thead .sorting_asc:after,
+div.dataTables_scrollBody table thead .sorting_desc:after {
   display: none;
 }
-div.dataTables_scrollBody > table > tbody > tr:first-child > th,
-div.dataTables_scrollBody > table > tbody > tr:first-child > td {
+div.dataTables_scrollBody table tbody tr:first-child th,
+div.dataTables_scrollBody table tbody tr:first-child td {
   border-top: none;
 }
 
@@ -148,14 +158,19 @@ div.dataTables_scrollFoot > .dataTables_scrollFootInner > table {
     text-align: center;
   }
 }
-table.dataTable.table-condensed > thead > tr > th {
+table.dataTable.table-sm > thead > tr > th {
   padding-right: 20px;
 }
-table.dataTable.table-condensed .sorting:after,
-table.dataTable.table-condensed .sorting_asc:after,
-table.dataTable.table-condensed .sorting_desc:after {
-  top: 6px;
-  right: 6px;
+table.dataTable.table-sm .sorting:before,
+table.dataTable.table-sm .sorting_asc:before,
+table.dataTable.table-sm .sorting_desc:before {
+  top: 5px;
+  right: 0.85em;
+}
+table.dataTable.table-sm .sorting:after,
+table.dataTable.table-sm .sorting_asc:after,
+table.dataTable.table-sm .sorting_desc:after {
+  top: 5px;
 }
 
 table.table-bordered.dataTable th,

data/app/assets/stylesheets/dataTables/responsive/{responsive.bootstrap.scss → responsive.bootstrap4.css}

@@ -16,7 +16,7 @@ table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child {
 }
 table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before,
 table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before {
-  top: 9px;
+  top: 12px;
   left: 4px;
   height: 14px;
   width: 14px;
@@ -32,7 +32,7 @@ table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:b
   font-family: 'Courier New', Courier, monospace;
   line-height: 14px;
   content: '+';
-  background-color: #337ab7;
+  background-color: #0275d8;
 }
 table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
 table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
@@ -78,7 +78,7 @@ table.dataTable.dtr-column > tbody > tr > th.control:before {
   font-family: 'Courier New', Courier, monospace;
   line-height: 14px;
   content: '+';
-  background-color: #337ab7;
+  background-color: #0275d8;
 }
 table.dataTable.dtr-column > tbody > tr.parent td.control:before,
 table.dataTable.dtr-column > tbody > tr.parent th.control:before {