ruby 具有选择过滤器等的Ajax DataTable Rails（Client DashBoard示例）

Posted 2021-05-15

## app/datatables

class ClientDashboardDatatable < AjaxDatatablesRails::Base
  include AjaxDatatablesRails::Extensions::Kaminari
  def_delegators :@view, :params, :link_to, :image_tag, :select_tag, :options_from_collection_for_select, :edit_sound_path, :sound_path

  def sortable_columns
    @sortable_columns ||= ['Sound.created_at']
  end

  def searchable_columns
    @searchable_columns ||= []
  end

  private

  def data
    records.map do |sound|
      [
        sound.created_at.strftime("%d/%m/%y %H:%M"),
        sound.title,
        [image_tag("/assets/flags/#{sound.language.id}.png", class: 'label-flag')],
        sound.status,
        #CORRECTORS VALIDATORS COORDINATORS
        [
          if sound.user.client_correctors.count > 0
            if sound.correction
              sound.correction.corrector ? sound.correction.corrector.email : "None"
            else
              select_tag "Corrector", options_from_collection_for_select(sound.user.client_correctors, "id", "email"), prompt: "Choose a Corrector..", class: 'corrector-autocomplete'
            end
          end
        ],
        [
          if sound.user.client_validators.count > 0
            if sound.correction
              sound.correction.validator ? sound.correction.validator.email : 'None'
            else
              select_tag "Validator", options_from_collection_for_select(sound.user.client_validators, "id", "email"), prompt: "Choose a Validator..", class: 'validator-autocomplete'
            end
          end
        ],
        [
          if sound.user.client_coordinators.count > 0
            if sound.correction
              sound.correction.coordinator ? sound.correction.coordinator.email : 'None'
            else
              select_tag "Coordinator", options_from_collection_for_select(sound.user.client_coordinators, "id", "email"), prompt: "Choose a Coordinator..", class: 'coordinator-autocomplete'
            end
          end
        ],
        [ if !sound.correction
            link_to(I18n.t('sound.create_correction'), '#', class: "btn btn-warning create-correction-btn", "data-id": sound.id)
          else
            "Correction created on "+sound.correction.created_at.strftime("%d/%m/%y at %H:%M")
          end
        ]
      ] - [[nil]]

    end
  end

  def get_raw_records
    result = Sound.where(user_id: options[:current_user].id, state: [*(-20..19), (100..199)])
    result = result.where('lower(title) like ?', "%#{params["search"]["value"].downcase}%") if params["search"]["value"]
    params["columns"].each do |column, option|
      next unless option["searchable"] == "true" && option["search"]["value"].present?
      result = result.where("#{option["name"]} = ?", "#{option["search"]["value"]}")
    end
    result
  end
end

table#client_dashboard_table data-source="/client/datatable"
  thead
    tr.filters
      th style="text-align: center" =t('sound.index.table.creation_date')
      th style="text-align: center" =t('sound.index.table.title')
      th style="text-align: center" =select(:sound , :language_id, options_from_collection_for_select(Language.all, "id", "name"),  prompt: "All Langs", include_blank: false)
      th style="text-align: center" =t('sound.index.table.status')
      -if @client_correctors.count > 0
        th style="text-align: center" Correctors
      -if @client_validators.count > 0
        th style="text-align: center" Validators
      -if @client_coordinators.count > 0
        th style="text-align: center" Coordinators
      th style="text-align: center" =t('sound.index.table.action')
  tbody

dashboard = $('#client_dashboard_table').DataTable
      processing: true
      serverSide: true
      ajax: $('#client_dashboard_table').data('source')
        # url: '/sounds/datatable'
      pagingType: 'full_numbers'
      columns: defColumns()
      "aaSorting": []
      initComplete: ->
        $('.corrector-autocomplete').select2
          placeholder: 'Choose a Corrector..'
          allowClear: true

        $('.validator-autocomplete').select2
          placeholder: 'Choose a Validator..'
          allowClear: true
        $('.coordinator-autocomplete').select2
          placeholder: 'Choose a Coordinator..'
          allowClear: true

        $('.filters select').on 'change', (e) =>
          th = $(e.target).closest("th")
          @api().column(th.index()).search($(e.target).val()).draw()
          
          # Re-Render the Select2 Fields after th Filter Draw
          $('.corrector-autocomplete').select2
          placeholder: 'Choose a Corrector..'
          allowClear: true

          $('.validator-autocomplete').select2
            placeholder: 'Choose a Validator..'
            allowClear: true
          $('.coordinator-autocomplete').select2
            placeholder: 'Choose a Coordinator..'
            allowClear: true

gem 'jquery-datatables-rails'
gem 'ajax-datatables-rails', github: 'ajahongir/ajax-datatables-rails'