add javascript filter box

diff --git a/_includes/footer.html b/_includes/footer.html
index f8a9d7eb92dad85c7ff06d7b6bc51c7cbf808774..45a1f462c3d45246ea9111d9b30d86332027c9db 100644 (file)
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,6 +1,7 @@
         <script src="assets/js/jquery.min.js"></script>
         <script src="assets/js/bootstrap.min.js"></script>
         <script src="assets/js/sorttable.js"></script>
+        <script src="assets/js/filtertable.js"></script>
         <script src="assets/js/jquery.timeago.js"></script>
         <script>
             $(function() {

diff --git a/assets/js/filtertable.js b/assets/js/filtertable.js
new file mode 100644 (file)
index 0000000..ecee7ab
--- /dev/null
+++ b/assets/js/filtertable.js
@@ -0,0 +1,53 @@
+/*
+ LightTableFilter by Chris Coyier
+ http://codepen.io/chriscoyier/pen/tIuBL
+ */
+(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 _filterExpr(val, text) {
+           return !val.split(' ').every(function(word) {
+               if (word.charAt(0) === '-') {
+                   return text.indexOf(word.substring(1)) === -1;
+               } else {
+                   return text.indexOf(word) !== -1;
+               }
+           });
+       }
+
+       function _filter(row) {
+           var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
+           row.style.display = _filterExpr(val, text) ? '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);

diff --git a/index.html b/index.html
index 31884a9f1389db41d45477500dcf5e6fc62fcf13..696e6c6983896742e646e357e1b6632a7fb44c1c 100644 (file)
--- a/index.html
+++ b/index.html
@@ -40,6 +40,7 @@ layout: default
 
         <hr>
 
+        <input type="search" class="light-table-filter form-control" data-table="sortable" placeholder="Filter" style="width: 100%">
         <table class="table table-striped table-condensed sortable">
             <thead>
                 <tr>