CODEWITHSUNDEEP
javascriptjquery
wobsoriano
wobsoriano

Reputation: 13462

Filter table not working

Hello so currently I have this table filter code which you can try on this fiddle. 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <script src="../js/vendor/jquery.js"></script>
      <script>
         (function(document) {
          'use strict';

          var LightTableFilter = (function(Arr) {

              var _input;

              function _onInputEvent(e) {
                  _input = e.target;
                  var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
                  Arr.forEach.call(tables, function(table) {
                      Arr.forEach.call(table.tBodies, function(tbody) {
                          Arr.forEach.call(tbody.rows, _filter);
                      });
                  });
              }

              function _filter(row) {
                  var text = row.textContent.toLowerCase(),
                      val = _input.value.toLowerCase();
                  row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
              }

              return {
                  init: function() {
                      var inputs = document.getElementsByClassName('light-table-filter');
                      Arr.forEach.call(inputs, function(input) {
                          input.oninput = _onInputEvent;
                      });
                  }
              };
          })(Array.prototype);

          document.addEventListener('readystatechange', function() {
              if (document.readyState === 'complete') {
                  LightTableFilter.init();
              }
          });

         })(document);


         $(document).ready(function() {
         $('a').click(function(e) {
          e.preventDefault();
          var text = $(this).text();
          $('input[type=search]').val(text);
          $( "#right-label" ).focus();
         });
         });
      </script>
   </head>
   <body>
      Search: <input type="search" class="light-table-filter" data-table="order-table" id="right-label" placeholder="Filter"> 
      <a href="#">Active</a> | <a href="#">Inactive</a> | <a href="#">Banned</a>
      <table>
      <thead>
         <tr>
            <th>Name</th>
            <th>Contact Number</th>
            <th>Course</th>
            <th>Status</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Robert</td>
            <td>09054848</td>
            <td>BSIT</td>
            <td>Active</td>
         </tr>
         <tr>
            <td>Mark</td>
            <td>5959547</td>
            <td>BSA</td>
            <td>Inactive</td>
         </tr>
         <tr>
            <td>Doe</td>
            <td>5959547</td>
            <td>BSA</td>
            <td>Banned</td>
         </tr>
      </tbody>
      </table>
   </body>
</html>

The table filter is working but I want to add text/s that when I click on it, it will be the value of the textbox and will filter the table. The text/s I added is Active, Inactive and Banned. If you click one of it, it will be the value of the input. The problem is the filter code isn't working with that code.

Any help would be much appreciated

Upvotes: 0

Views: 1770

Answers (1)

Kushal
Kushal

Reputation: 1360

Updated the code check it out https://jsfiddle.net/kushal812/vwhccu7w/16/

Some of the changes made

var table = $('#mytable')
$('a').click(function (e) {
     e.preventDefault();
     var text = $(this).text() || "";
     table.find('tbody > tr').hide();
     $('input[type=search]').val(text);
     table.find("." + text.toLowerCase()).removeClass("hidden")
 });

Upvotes: 1

Related Questions