diff options
| -rw-r--r-- | _includes/footer.html | 1 | ||||
| -rw-r--r-- | assets/js/filtertable.js | 53 | ||||
| -rw-r--r-- | index.html | 1 |
3 files changed, 55 insertions, 0 deletions
diff --git a/_includes/footer.html b/_includes/footer.html index f8a9d7e..45a1f46 100644 --- 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 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); @@ -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> |