diff --git a/app/controllers/concerns/data_table.rb b/app/controllers/concerns/data_table.rb index a6268de..f762d1a 100644 --- a/app/controllers/concerns/data_table.rb +++ b/app/controllers/concerns/data_table.rb @@ -3,12 +3,32 @@ module DataTable extend ActiveSupport::Concern def apply_filter(user, params) - p selection_to_json(user, user.transactions) + p AjaxRequest.new(params) selection_to_json(user, user.transactions) end private + class AjaxRequest + + def initialize(params) + # Parsing according to https://datatables.net/manual/server-side + @draw = params.require(:draw).to_i + @start = params.require(:start).to_i + @length = params.require(:length).to_i + @columns = Hash.new + params.require(:columns).each do |i, column| + @columns[column.require(:data).to_sym] = { + name: column[:name], + searchable: column[:searchable] == 'true', + orderable: column[:orderable] == 'true', + search_value: column.require(:search)[:value] + } + end + end + + end + def selection_to_json(user, selection) { data: selection.map { |transaction| { amount: transaction.signed_amount_for(user), diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml index b6524c2..fa6bcb8 100644 --- a/app/views/users/show.html.haml +++ b/app/views/users/show.html.haml @@ -1,23 +1,32 @@ %h2= @user.name %table#transactions.display{data: { source: user_path(@user) }} %thead - %tr - %td Amount - %td Origin - %td Message - %td Peer - %td Time %tr %th Amount %th Origin %th Message %th Peer %th Time + %tr + %td.bound.input-listen + %input.lower-bound{type: 'number', placeholder: 'lower', class: 'pure-u-1-5'} + = "<= Amount <=" + %input.upper-bound{type: 'number', placeholder: 'upper', class: 'pure-u-1-5'} + %td.input-listen + %input{type: 'text', placeholder: 'Filter on Origin'} + %td.input-listen + %input{type: 'text', placeholder: 'Filter on Message'} + %td.input-listen + %input{type: 'text', placeholder: 'Filter on Peer'} + %td.bound.input-listen + %input.lower-bound{type: 'date', placeholder: 'after'} + = "<= Time <=" + %input.upper-bound{type: 'date', placeholder: 'before'} %tbody :javascript $(document).ready(function() { - $('#transactions').dataTable({ + var table = $('#transactions').DataTable({ processing: true, serverSide: true, searching: true, @@ -31,14 +40,24 @@ { data: 'peer', name: 'Peer' }, { data: 'time', name: 'Time' } ] - }).columnFilter({ - sPlaceHolder: 'head:before', - aoColumns: [ - { type: 'number-range' }, - { type: 'text' }, - { type: 'text' }, - { type: 'text' }, - { type: 'date-range' } - ] + }); + + var tds = $('.input-listen'); + var i = 0; + table.columns().every(function() { + var column = this + tds.eq(i).find('input').on('keyup change', function() { + var value = null; + var td = $(this).parent(); + if(td.hasClass('bound')) { + value = td.find('.lower-bound').val() + '~' + td.find('.upper-bound').val(); + } else { + value = $(this).val() + } + if(column.search() !== value) { + column.search(value).draw(); + } + }); + i = i + 1; }); });