"Easy Table Filter"
Bootstrap 3.3.0 Snippet by konstantc

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <section class="content"> <p><pre class="output"></pre></p> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-body"> <div class="pull-left"> <div class="btn-group dept-filter"> <!-- here comes the filter --> </div> </div> <div class="table-container"> <table class="table table-filter"> <tbody> <tr data-status="pagado"> <td> <div class="media"> <a href="#" class="pull-left"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/120.jpg" class="media-photo"> </a> <div class="media-body"> <span class="media-meta pull-right">Febrero 13, 2016</span> <h4 class="title"> Lorem Impsum <span class="pull-right pagado">(Pagado)</span> </h4> <p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p> </div> </div> </td> </tr> <tr data-status="pendiente"> <td> <div class="media"> <a href="#" class="pull-left"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/120.jpg" class="media-photo"> </a> <div class="media-body"> <span class="media-meta pull-right">Febrero 13, 2016</span> <h4 class="title"> Lorem Impsum <span class="pull-right pendiente">(Pendiente)</span> </h4> <p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p> </div> </div> </td> </tr> <tr data-status="cancelado"> <td> <div class="media"> <a href="#" class="pull-left"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/120.jpg" class="media-photo"> </a> <div class="media-body"> <span class="media-meta pull-right">Febrero 13, 2016</span> <h4 class="title"> Lorem Impsum <span class="pull-right cancelado">(Cancelado)</span> </h4> <p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p> </div> </div> </td> </tr> <tr data-status="pagado" class="selected"> <td> <div class="media"> <a href="#" class="pull-left"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/120.jpg" class="media-photo"> </a> <div class="media-body"> <span class="media-meta pull-right">Febrero 13, 2016</span> <h4 class="title"> Lorem Impsum <span class="pull-right pagado">(Pagado)</span> </h4> <p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p> </div> </div> </td> </tr> <tr data-status="pendiente"> <td> <div class="media"> <a href="#" class="pull-left"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/120.jpg" class="media-photo"> </a> <div class="media-body"> <span class="media-meta pull-right">Febrero 13, 2016</span> <h4 class="title"> Lorem Impsum <span class="pull-right pendiente">(Pendiente)</span> </h4> <p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <div class="content-footer"> <p></p> </div> </div> </section> </div> </div>
/* -------------------------------------------------- :: General -------------------------------------------------- */ body { font-family: 'Open Sans', sans-serif; color: #353535; } .content h1 { text-align: center; } .content .content-footer p { color: #6d6d6d; font-size: 12px; text-align: center; } .content .content-footer p a { color: inherit; font-weight: bold; } /* -------------------------------------------------- :: Table Filter -------------------------------------------------- */ .panel { border: 1px solid #ddd; background-color: #fcfcfc; } .panel .btn-group { margin: 15px 0 30px; } .panel .btn-group .btn { transition: background-color .3s ease; } .table-filter { background-color: #fff; border-bottom: 1px solid #eee; } .table-filter tbody tr:hover { cursor: pointer; background-color: #eee; } .table-filter tbody tr td { padding: 10px; vertical-align: middle; border-top-color: #eee; } .table-filter tbody tr.selected td { background-color: #eee; } .table-filter tr td:first-child { width: 38px; } .table-filter tr td:nth-child(2) { width: 35px; } .ckbox { position: relative; } .ckbox input[type="checkbox"] { opacity: 0; } .ckbox label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .ckbox label:before { content: ''; top: 1px; left: 0; width: 18px; height: 18px; display: block; position: absolute; border-radius: 2px; border: 1px solid #bbb; background-color: #fff; } .ckbox input[type="checkbox"]:checked + label:before { border-color: #2BBCDE; background-color: #2BBCDE; } .ckbox input[type="checkbox"]:checked + label:after { top: 3px; left: 3.5px; content: '\e013'; color: #fff; font-size: 10px; font-family: 'Glyphicons Halflings'; position: absolute; } .table-filter .star { color: #ccc; text-align: center; display: block; } .table-filter .star.star-checked { color: #F0AD4E; } .table-filter .star:hover { color: #ccc; } .table-filter .star.star-checked:hover { color: #F0AD4E; } .table-filter .media-photo { width: 35px; } .table-filter .media-body { display: block; /* Had to use this style to force the div to expand (wasn't necessary with my bootstrap version 3.3.6) */ } .table-filter .media-meta { font-size: 10px; color: #999; } .table-filter .media .title { color: #2BBCDE; font-size: 14px; font-weight: bold; line-height: normal; margin: 0; } .table-filter .media .title span { font-size: .8em; margin-right: 20px; } .table-filter .media .title span.pagado { color: #5cb85c; } .table-filter .media .title span.pendiente { color: #f0ad4e; } .table-filter .media .title span.cancelado { color: #d9534f; } .table-filter .media .summary { font-size: 12px; }
function getKeyByValue(obj, key, val) { for (var i in obj) { if (obj) { var o = obj[i]; for (var k in o) { if (k==key && val == o[k]) { return i; //break; } } } } } function arrayUpdate (array, value) { if (array.indexOf(value) === -1) { array.push(value); //console.log('New array collection is : ' + array); return array; } else if (array.indexOf(value) > -1) { //console.log(value + ' already exists in the array collection.'); } } function arrayNextIndex(array, value) { var index = array.indexOf(value); if(index >= 0 && index < array.length - 1){ nextItem = array[index + 1]; return nextItem; } } /* var item = (from user input); //some code to get the initial item from user function findcode(code){ var arr = ["ball", "1f7g", "spoon", "2c8d", "pen", "9c3c"]; //making the array for (var i=0; i<arr.lenth; i++){ //for loop to look through array arr.indexOf(item); //search array for whatever the user input was var code = arr(i+1); //make the variable 'code' whatever comes next break; } } */ /* index = array.indexOf(value); if(index >= 0 && index < array.length - 1){ nextItem = array[index + 1] } var data = {"ball":"1f7g", "spoon":"2c8d", "pen":"9c3c"} var code = data[name] */ var jsonObj = { "dataUser": [ { "user_id": "2", "user_name": "user.name2", "user_active": "1", "department_id": "1", "department_name": "dept1", "registry_entry": [ { "entry_id": "398", "user_id": "2", "action_type": "1", "timestamp_start": "2017-09-11 00:50:04", "timestamp_end": "0000-00-00 00:00:00" } ] }, { "user_id": "3", "user_name": "user.name3", "user_active": "1", "department_id": "1", "department_name": "dept1", "registry_entry": [ { "entry_id": "399", "user_id": "3", "action_type": "1", "timestamp_start": "2017-09-11 00:50:11", "timestamp_end": "0000-00-00 00:00:00" }, { "entry_id": "400", "user_id": "3", "action_type": "2", "timestamp_start": "2017-09-11 00:50:26", "timestamp_end": "0000-00-00 00:00:00" } ] }, { "user_id": "4", "user_name": "user.name4", "user_active": "1", "department_id": "1", "department_name": "dept1", "registry_entry": [ { "entry_id": "401", "user_id": "4", "action_type": "1", "timestamp_start": "2017-09-11 00:50:35", "timestamp_end": "0000-00-00 00:00:00" }, { "entry_id": "402", "user_id": "4", "action_type": "2", "timestamp_start": "2017-09-11 00:50:50", "timestamp_end": "2017-09-11 00:50:57" } ] }, { "user_id": "5", "user_name": "user.name15", "user_active": "1", "department_id": "1", "department_name": "dept2", "registry_entry": [ { "entry_id": "404", "user_id": "15", "action_type": "1", "timestamp_start": "2017-09-11 00:51:30", "timestamp_end": "0000-00-00 00:00:00" }, { "entry_id": "405", "user_id": "15", "action_type": "2", "timestamp_start": "2017-09-11 00:51:37", "timestamp_end": "2017-09-11 00:51:41" }, { "entry_id": "406", "user_id": "15", "action_type": "3", "timestamp_start": "2017-09-11 00:51:47", "timestamp_end": "0000-00-00 00:00:00" } ] }, { "user_id": "15", "user_name": "user.name5", "user_active": "1", "department_id": "1", "department_name": "dept1", "registry_entry": [ { "entry_id": "403", "user_id": "5", "action_type": "1", "timestamp_start": "2017-09-11 00:51:07", "timestamp_end": "2017-09-11 00:51:11" } ] }, { "user_id": "7", "user_name": "user.name7", "user_active": "1", "department_id": "1", "department_name": "dept1" }, { "user_id": "6", "user_name": "user.name6", "user_active": "1", "department_id": "1", "department_name": "dept1", "registry_entry": [ { "entry_id": "484", "user_id": "6", "action_type": "1", "timestamp_start": "2017-09-11 00:51:30", "timestamp_end": "0000-00-00 00:00:01" }, { "entry_id": "485", "user_id": "6", "action_type": "2", "timestamp_start": "2017-09-11 00:51:37", "timestamp_end": "0000-00-00 00:00:01" }, { "entry_id": "486", "user_id": "6", "action_type": "3", "timestamp_start": "2017-09-11 00:51:47", "timestamp_end": "0000-00-00 00:00:00" }, { "entry_id": "488", "user_id": "6", "action_type": "4", "timestamp_start": "2017-09-11 01:02:47", "timestamp_end": "0000-00-00 00:00:01" } ] } ], "dataRegistryActions": [ { "signature_id": "1", "locked": "1", "signature_name": "presence", "signature_description": "presence" }, { "signature_id": "2", "locked": "1", "signature_name": "P1", "signature_description": "main" }, { "signature_id": "3", "locked": "0", "signature_name": "P2", "signature_description": "short" }, { "signature_id": "4", "locked": "0", "signature_name": "P3", "signature_description": "special" } ], "dataDepartments": [ { "department_id": "1", "department_name": "dept1-I" }, { "department_id": "2", "department_name": "dept2-A" }, { "department_id": "3", "department_name": "dept3-N" }, { "department_id": "4", "department_name": "dept4-AP" }, { "department_id": "5", "department_name": "dept5-C" }, ] }; $(document).ready(function () { var dEntry = jsonObj.dataDepartments; for (var d in dEntry) { $(".dept-filter").append('<button type="button" class="btn btn-default btn-filter" data-target="FILTER-NAME">'+dEntry[d].department_name+'</button>\n'); } $(".dept-filter").append('<button type="button" class="btn btn-default btn-filter" data-target="all">All</button>\n'); $('.star').on('click', function () { $(this).toggleClass('star-checked'); }); $('.ckbox label').on('click', function () { $(this).parents('tr').toggleClass('selected'); }); $('.btn-filter').on('click', function () { var $target = $(this).data('target'); if ($target != 'all') { $('.table tr').css('display', 'none'); $('.table tr[data-status="' + $target + '"]').fadeIn('slow'); } else { $('.table tr').css('display', 'none').fadeIn('slow'); } }); });

Related: See More


Questions / Comments: