tab/app/views/users/show.html.haml

%h2= @user.name

.panel.panel-default.data-table-filters
  .panel-header
    %h3.panel-title Filters
  .panel-body
    .pure-g
      .bound.input-listen.pure-u-1{ 'data-input-type': 'date-range' }
        %fieldset.pure-group-inline
          %span.fa.fa-calendar.pure-group-addon
          %input.lower-bound{type: 'date', placeholder: 'after'}
        \-
        %input.upper-bound{type: 'date', placeholder: 'before'}
    .pure-g
      .bound.input-listen.pure-u-1{ 'data-input-type': 'number-range' }
        %fieldset.pure-group-inline
          %span.icon-euro.pure-group-addon
          %input.lower-bound.pure-group-addon{type: 'number', placeholder: 'Minimum'}
        \-
        %fieldset.pure-group-inline
          %span.icon-euro.pure-group-addon
          %input.upper-bound.pure-group-addon{type: 'number', placeholder: 'Maximum'}
    .pure-g
      .input-listen.pure-u-md-1-4{ 'data-input-type': 'text' }
        %input{type: 'text', placeholder: 'Filter on Issuer'}
      .input-listen.pure-u-md-1-4{ 'data-input-type': 'text' }
        %input{type: 'text', placeholder: 'Filter on Peer'}
      .input-listen.pure-u-md-1-2{ 'data-input-type': 'text' }
        %input{type: 'text', placeholder: 'Filter on Message'}


%table#transactions.pure-table.pure-table-striped{data: { source: user_path(@user) }}
  %thead
    %tr
      %th Time
      %th Amount
      %th Peer
      %th Issuer
      %th Message
  %tbody

:javascript
  $(document).ready(function() {
    var table = $('#transactions').DataTable({
      processing: true,
      serverSide: true,
      searching: false,
      lengthChange: false,
      ordering: false,
      ajax: $('#transactions').data('source'),
      pagingType: 'full_numbers',
      autoWidth: false,
      responsive: true,
      columns: [
        { data: 'time',    name: 'Time',    width: "15%", className: 'min-tablet-l'},
        { data: 'amount',  name: 'Amount',  width: "10%", className: 'min-mobile'},
        { data: 'peer',    name: 'Peer',    width: "15%", className: 'min-mobile'},
        { data: 'issuer',  name: 'Issuer',  width: "15%", className: 'min-desktop'},
        { data: 'message', name: 'Message', width: "45%", className: 'min-tablet-p'}
      ]
    });

    $('.input-listen').each(function(index, element) {
      var filter = $(element);
      var type   = filter.attr('data-input-type');
      var column = table.column(index);
      filter.find('input').on('keyup change', function() {
        var value = null
        if(filter.hasClass('bound')) {
          var lower = filter.find('.lower-bound');
          var upper = filter.find('.upper-bound');
          value = type + ':' + lower.val() + '~' + upper.val();
        } else {
          value = type + ':' + $(this).val();
        }
        value = filter.attr('data-input-type') + ':' + value;
        if(column.search() !== value) {
          column.search(value).draw();
        }
      });
    });
  });