Ajax Loader
×

Light Javascript Table Filter

A lightweight script to simply filtering html tables. You can fork here https://github.com/Roparz/Light-Javascript-Table-Filter

HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
<title>Light Javascript Table Filter</title>
5
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css" rel="stylesheet">
6
  </head>
7
  <body>
8
<section class="container">
9
 
10
  <h2>Light Javascript Table Filter</h2>
11
 
12
  <input type="search" class="light-table-filter" data-table="order-table" placeholder="Filtrer" />
13
 
14
  <table class="order-table">
15
    <thead>
16
      <tr>
17
        <th>Name</th>
18
        <th>Email</th>
19
        <th>Phone</th>
20
        <th>Price</th>
21
      </tr>
22
    </thead>
23
    <tbody>
24
      <tr>
25
        <td>John Doe</td>
26
        <td>john.doe@gmail.com</td>
27
        <td>0123456789</td>
28
        <td>99</td>
29
      </tr>
30
      <tr>
31
        <td>Jane Vanda</td>
32
        <td>jane@vanda.org</td>
33
        <td>9876543210</td>
34
        <td>349</td>
35
      </tr>
36
      <tr>
37
        <td>Alferd Penyworth</td>
38
        <td>alfred@batman.com</td>
39
        <td>6754328901</td>
40
        <td>199</td>
41
      </tr>
42
    </tbody>
43
  </table>
44
 
45
</section>
46
 
47
  </body>
48
</html>
 
CSS 
 
1
 
2
h2 {
3
  margin-bottom: 50px;
4
}
5
 
6
.container {
7
  text-align: center;
8
  overflow: hidden;
9
  width: 800px;
10
  margin: 0 auto;
11
}
12
 
13
.container table {
14
  width: 100%;
15
}
16
 
17
.container td, .container th {
18
  padding: 10px;
19
}
20
 
21
.container td:first-child, .container th:first-child {
22
  padding-left: 20px;
23
}
24
 
25
.container td:last-child, .container th:last-child {
26
  padding-right: 20px;
27
}
28
 
29
.container th {
30
  border-bottom: 1px solid #ddd;
31
  position: relative;
32
}
33
 
 
JavaScript 
(function(document) {
1
(function(document) {
2
  'use strict';
3
 
4
  var LightTableFilter = (function(Arr) {
5
 
6
    var _input;
7
 
8
    function _onInputEvent(e) {
9
      _input = e.target;
10
      var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
11
      Arr.forEach.call(tables, function(table) {
12
        Arr.forEach.call(table.tBodies, function(tbody) {
13
          Arr.forEach.call(tbody.rows, _filter);
14
        });
15
      });
16
    }
17
 
18
    function _filter(row) {
19
      var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
20
      row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
21
    }
22
 
23
    return {
24
      init: function() {
25
        var inputs = document.getElementsByClassName('light-table-filter');
26
        Arr.forEach.call(inputs, function(input) {
27
          input.oninput = _onInputEvent;
28
        });
29
      }
30
    };
31
  })(Array.prototype);
32
 
33
  document.addEventListener('readystatechange', function() {
34
    if (document.readyState === 'complete') {
35
      LightTableFilter.init();
36
    }
37
  });
38
 
39
})(document);
 

Light Javascript Table Filter

CSSDeck G+