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' }
        = "Between"
        %input.lower-bound{type: 'date', placeholder: 'after'}
        = "and"
        %input.upper-bound{type: 'date', placeholder: 'before'}
    .pure-g
      .bound.input-listen.pure-u-1{ 'data-input-type': 'number-range' }
        = "Between"
        %input.lower-bound{type: 'number', placeholder: 'lower', class: 'pure-u-1-5'}
        = "and"
        %input.upper-bound{type: 'number', placeholder: 'upper', class: 'pure-u-1-5'}
    .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'},
      ]
    });

    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()
        }
        value = td.attr('data-input-type') + ':' + value
        if(column.search() !== value) {
          column.search(value).draw();
        }
      });
      i = i + 1;
    });
  });