CODEWITHSUNDEEP
javascripthtml-table
williswin
williswin

Reputation: 133

HTML Table Multi-selection + Filter

I am having trouble getting multiselect to work properly with the filter function. If I remove multiple from $select, the function filter works properly, but adding multiple selection breaks it. Any suggestions or fix will be greatly appreciated, thank you!

The code I have below currently does not filter because of the multiple attribute, but removing it allows it to only do single selection + filtering. 

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="/stylesheets/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
    <meta charset="utf-8">
    <title>Filter</title>

</head>

</body>
</html>



<table id="myTable" class="table table-striped">

  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th class="dropdown-header">Age</th>
      <th>Email</th>
      <th class="dropdown-header">Gender</th>
      <th class="dropdown-header">Term</th>
      <th class="dropdown-header">Enrolled</th>
    </tr>
  </thead>

  <tbody>


    <tr>
      <td>John</td>
      <td>Smith</td>
      <td data-field-name="age">15</td>
      <td>123</td>
      <td data-field-name="gender">Male</td>
      <td data-field-name="term">Summer2017</td>
      <td data-field-name="enrolled">Fall2018</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
      <td data-field-name="age">16</td>
      <td>456</td>
      <td data-field-name="gender">Female</td>
      <td data-field-name="term">Fall2018</td>
      <td data-field-name="enrolled">Fall2019</td>
    </tr>
    <tr>
      <td>Bobby</td>
      <td>Adams</td>
      <td data-field-name="age">15</td>
      <td>789</td>
      <td data-field-name="gender">Male</td>
      <td data-field-name="term">Spring2019</td>
      <td data-field-name="enrolled">Fall2018</td>
    </tr>
    <tr>
      <td>Sarah</td>
      <td>Lee</td>
      <td data-field-name="age">15</td>
      <td>456</td>
      <td data-field-name="gender">Female</td>
      <td data-field-name="term">Fall2018</td>
      <td data-field-name="enrolled">Fall2018</td>
    </tr>
  </tbody>
</table>

<script>
    (function($) {
  $.fn.tableFilterHeaders = function(filterFn) {
    this.each((index, header) => {
      let $header = $(header),
          $table = $header.closest('table'),
          text = $header.text(),
          colIndex = $header.closest('th').index(),
          fieldName = $header.attr('data-field-name') || text.toLowerCase(),
      $select = $('<select multiple>')
        .data('fieldName', fieldName)
        //.attr('multiple')
        .append($('<option>').text(text).val('').prop('disabled', true))
        .append($('<option>').text('All').val('all'))
        .append($table.find('tbody tr')
          .toArray()
          .map(tr => {
            return $(tr).find(`td:eq(${colIndex})`).text();
          })
          .filter(text => text.trim().length > 0)
          .sort()
          .filter((v, i, a) => a.indexOf(v) === i)
          .map(text => {
            return $('<option>').text(text).val(text);
          }));
      $header.empty().append($select.val('').on('change', filterFn));
    });
  };
  $.fn.initRowClasses = function(oddCls, evenCls) {
    this.find('tbody tr').each(function(i) {
      $(this).toggleClass(oddCls, i % 2 == 0).toggleClass(evenCls, i % 2 == 1);
    });
  };
  $.fn.updateRowClasses = function(oddCls, evenCls) {
    this.find('tbody tr:visible:even').addClass(oddCls).removeClass(evenCls);
    this.find('tbody tr:visible:odd').addClass(evenCls).removeClass(oddCls);
  };
})(jQuery);

$('#myTable').initRowClasses('odd', 'even');
$('.dropdown-header').tableFilterHeaders(filterText);

function filterText(e) {
  let $filter = $(e.target),
      $table = $filter.closest('table'),
      $filters = $table.find('.dropdown-header select'),
  filterObj = $filters.toArray().reduce((obj, filter) => {
    let $filter = $(filter);
    return Object.assign(obj, { [$filter.data('fieldName')] : $filter.val() });
  }, {});
  if ($filter.val() === 'all') {
    $filter.val('')
  }
  $table.find('tbody tr').each(function() {
    $(this).toggle($(this).find('td').toArray().every(td => {
      let $td = $(td), fieldName = $td.attr('data-field-name');
      if (fieldName != null) {
        return filterObj[fieldName] === null ||
          filterObj[fieldName] === '' ||
          filterObj[fieldName] === 'all' ||
          filterObj[fieldName] === $td.text();
      }
      return true;
    }));
  });

  $table.updateRowClasses('odd', 'even');
}
</script>

enter image description here

Upvotes: 0

Views: 1846

Answers (1)

Dhaval Vachheta
Dhaval Vachheta

Reputation: 104

When we use multi selection then the value will be in array, So the filter function will be,

$table.find('tbody tr').each(function () {
  $(this).toggle($(this).find('td').toArray().every(td => {
    let $td = $(td), fieldName = $td.attr('data-field-name');
    if (fieldName != null) {
      if (Array.isArray(filterObj[fieldName])) {
        return filterObj[fieldName].length === 0 ||
          filterObj[fieldName].indexOf('all') >= 0 ||
          filterObj[fieldName].indexOf($td.text()) >= 0;
      }
      return filterObj[fieldName] === null ||
        filterObj[fieldName] === '' ||
        filterObj[fieldName] === 'all' ||
        filterObj[fieldName] === $td.text();
    }
    return true;
  }));
});

Upvotes: 2

Related Questions