midgard/tab
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge branch 'filter-datatables' of https://github.com/ZeusWPI/Tab into filter-datatables

Browse source
This commit is contained in:
benji 2015-09-11 11:09:44 +02:00
parent c8c77c0b9c 0973898743
commit 7c99a9229e
2 changed files with 30 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/controllers/concerns/data_table.rb
View file

@ -16,9 +16,9 @@ class DataTable
end end
def query def query
#pred = predicates pred = predicates
q = @transactions.query q = @transactions.query
#q = q.where(pred) if pred q = q.where(pred) if pred
q q
end end
@ -34,19 +34,19 @@ class DataTable
def range_predicates name def range_predicates name
col = @params[:columns][name] col = @params[:columns][name]
[ [
(@table[:name].gteq(col[:lower]) if col[:lower]), (@table[name].gteq(col[:lower]) if col[:lower]),
(@table[:name].lteq(col[:upper]) if col[:upper]) (@table[name].lteq(col[:upper]) if col[:upper])
] ]
end end
def eq_predicate name def eq_predicate name
value = @params[:columns][:name][:value] value = @params[:columns][name][:value]
@table[:name].eq(value) if value @table[name].eq(value) if value
end end
def like_predicate name def like_predicate name
value = @params[:columns][:name][:value] value = @params[:columns][name][:value]
@table[:name].matches("%#{value}%") if value @table[name].matches("%#{value}%") if value
end end
private private

41
app/views/users/show.html.haml
View file

@ -5,7 +5,7 @@
%h3.panel-title Filters %h3.panel-title Filters
.panel-body .panel-body
.pure-g .pure-g
.bound.input-listen.pure-u-1{ 'data-input-type': 'date-range' } .bound.input-listen.pure-u-1{ 'data-input-type': 'date-range', 'data-filter-name': 'Time' }
%fieldset.pure-group-inline %fieldset.pure-group-inline
%i.fa.fa-calendar.pure-group-addon %i.fa.fa-calendar.pure-group-addon
%input.lower-bound{type: 'date', placeholder: 'after', class: 'pure-group-addon'} %input.lower-bound{type: 'date', placeholder: 'after', class: 'pure-group-addon'}
@ -14,7 +14,7 @@
%i.fa.fa-calendar.pure-group-addon %i.fa.fa-calendar.pure-group-addon
%input.upper-bound{type: 'date', placeholder: 'after', class: 'pure-group-addon'} %input.upper-bound{type: 'date', placeholder: 'after', class: 'pure-group-addon'}
.pure-g .pure-g
.bound.input-listen.pure-u-1{ 'data-input-type': 'number-range' } .bound.input-listen.pure-u-1{ 'data-input-type': 'number-range', 'data-filter-name': 'Amount' }
%fieldset.pure-group-inline %fieldset.pure-group-inline
%span.icon-euro.pure-group-addon %span.icon-euro.pure-group-addon
%input.lower-bound.pure-group-addon{type: 'number', placeholder: 'Minimum'} %input.lower-bound.pure-group-addon{type: 'number', placeholder: 'Minimum'}
@ -23,11 +23,11 @@
%span.icon-euro.pure-group-addon %span.icon-euro.pure-group-addon
%input.upper-bound.pure-group-addon{type: 'number', placeholder: 'Maximum'} %input.upper-bound.pure-group-addon{type: 'number', placeholder: 'Maximum'}
.pure-g .pure-g
.input-listen.pure-u-md-1-4{ 'data-input-type': 'text' } .input-listen.pure-u-md-1-4{ 'data-input-type': 'text', 'data-filter-name': 'Issuer' }
%input{type: 'text', placeholder: 'Filter on Issuer'} %input{type: 'text', placeholder: 'Filter on Issuer'}
.input-listen.pure-u-md-1-4{ 'data-input-type': 'text' } .input-listen.pure-u-md-1-4{ 'data-input-type': 'text', 'data-filter-name': 'Peer' }
%input{type: 'text', placeholder: 'Filter on Peer'} %input{type: 'text', placeholder: 'Filter on Peer'}
.input-listen.pure-u-md-1-2{ 'data-input-type': 'text' } .input-listen.pure-u-md-1-2{ 'data-input-type': 'text', 'data-filter-name': 'Message' }
%input{type: 'text', placeholder: 'Filter on Message'} %input{type: 'text', placeholder: 'Filter on Message'}
@ -46,7 +46,7 @@
var table = $('#transactions').DataTable({ var table = $('#transactions').DataTable({
processing: true, processing: true,
serverSide: true, serverSide: true,
searching: false, searching: true,
lengthChange: false, lengthChange: false,
ordering: false, ordering: false,
ajax: $('#transactions').data('source'), ajax: $('#transactions').data('source'),
@ -58,27 +58,30 @@
{ data: 'amount', name: 'Amount', width: "10%", className: 'min-mobile'}, { data: 'amount', name: 'Amount', width: "10%", className: 'min-mobile'},
{ data: 'peer', name: 'Peer', width: "15%", className: 'min-mobile'}, { data: 'peer', name: 'Peer', width: "15%", className: 'min-mobile'},
{ data: 'issuer', name: 'Issuer', width: "15%", className: 'min-desktop'}, { data: 'issuer', name: 'Issuer', width: "15%", className: 'min-desktop'},
{ data: 'message', name: 'Message', width: "45%", className: 'min-tablet-p'}, { data: 'message', name: 'Message', width: "45%", className: 'min-tablet-p'}
] ]
}); });
var tds = $('.input-listen'); $('.dataTables_filter').hide();
var i = 0;
table.columns().every(function() { $('.input-listen').each(function(index, element) {
var column = this var filter = $(element);
tds.eq(i).find('input').on('keyup change', function() { var type = filter.attr('data-input-type');
var value = null; var column = table.column(filter.attr('data-filter-name') + ':name');
var td = $(this).parent(); console.log(column);
if(td.hasClass('bound')) { filter.find('input').on('keyup change', function() {
value = td.find('.lower-bound').val() + '~' + td.find('.upper-bound').val(); var value = null
if(filter.hasClass('bound')) {
var lower = filter.find('.lower-bound');
var upper = filter.find('.upper-bound');
value = lower.val() + '~' + upper.val();
} else { } else {
value = $(this).val() value = $(this).val();
} }
value = td.attr('data-input-type') + ':' + value value = filter.attr('data-input-type') + ':' + value;
if(column.search() !== value) { if(column.search() !== value) {
column.search(value).draw(); column.search(value).draw();
} }
}); });
i = i + 1;
}); });
}); });