"prj_1"
Bootstrap 4.0.0 Snippet by Cp007

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <tbody><div class="customcontent content-wrapper content-wrapper--with-bg"> <div class="container"> <div class="pull-right"> <div class="btn-group"> <button type="button" class="btn btn-success btn-filter" data-target="pagado">Pagado</button> <button type="button" class="btn btn-warning btn-filter" data-target="pendiente">Pendiente</button> <button type="button" class="btn btn-danger btn-filter" data-target="cancelado">Cancelado</button> <button type="button" class="btn btn-default btn-filter" data-target="all">Todos</button> </div> </div> <div class="row proposal-header-row"> <div class="col-md-9"><h2>Reviews</h2></div></div> <div class="row list-group"> <div class="proposal-container"> <table class="table table-filter"> <tr id="head"><th class="col-md-3">Sanction Id</th><th class="col-md-4">Title</th><th class="col-md-2">Created by</th><th class="col-md-2">Date created</th><th class="col-md-1">Status</th></tr> <tbody> <tr data-status="pagado"><td>CH-ITD/FS/2017-2018/XX</td><td>Approval for Implementation of Olympic</td><td>00000000-0000-0000-0f55-790136a9cb1a</td><td>03 Apr 2018 10:58</td><td><span class="label pagado">sucess</span></td></tr> <tr data-status="pendiente"><td>CH12-ITD/FS/2017-2018/XX</td><td>chin</td><td>00000000-0000-0000-0f55-790136a9cb1a</td><td>03 Apr 2018 10:58</td><td><span class="label pendiente">pending</span></td></tr> </tbody> </table></div></div></div></div>
.proposal-header-row { display: flex; align-items: center; } .proposal-container { overflow: hidden; margin: 0 auto; margin-top: 30px; } .proposal-container table { width: 100%; } .proposal-container tr { height: 60px; } .proposal-container td, .proposal-container th { padding: 10px; } .proposal-container td:first-child, .proposal-container th:first-child { padding-left: 20px; } .proposal-container td:last-child, .proposal-container th:last-child { padding-right: 20px; } .proposal-container th { border-bottom: 1px solid #ddd; position: relative; cursor: pointer; } .proposal-container th.desc:after { border-top-color: #666; } .proposal-container th.asc:before { border-bottom-color: #666; } .proposal-container th:after, .proposal-container th:before { content: ''; display: block; position: absolute; right: 0; border-color: transparent; border-style: solid; border-width: 5px; width: 0; height: 0; } .proposal-container th:after { border-top-color: #ddd; top: 22px; } .proposal-container th:before { border-bottom-color: #ddd; top: 10px; } /* styles for '...' */ .summary { /* hide text if it more than N lines */ overflow: hidden; /* for set '...' in absolute position */ position: relative; /* use this value to count block height */ line-height: 1.2em; /* max-height = line-height (1.2) * lines max number (3) */ max-height: 3.6em; /* fix problem when last visible word doesn't adjoin right side */ text-align: justify; /* place for '...' */ margin-right: -1em; padding-right: 1em; } /* create the ... */ .summary:before { /* points in the end */ content: '...'; /* absolute position */ position: absolute; /* set position to right bottom corner of block */ right: 0; bottom: 0; } /* hide ... if we have text, which is less than or equal to max lines */ .summary:after { /* points in the end */ content: ''; /* absolute position */ position: absolute; /* set position to right bottom corner of text */ right: 0; /* set width and height */ width: 1em; height: 1em; margin-top: 0.2em; /* bg color = bg color under block */ background: white; } .pagado { background-color: #5cb85c; } .pendiente { background-color:#f0ad4e; } .cancelado { background-color: #d9534f; } .label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; } .pull-right { float: right!important; }
$(document).ready(function () { $('.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[id!="head"]').css('display', 'none'); $('.table tr[data-status="' + $target + '" ]').fadeIn('slow'); } else { $('.table tr[id!="head"]').css('display', 'none').fadeIn('slow'); } }); });

Related: See More


Questions / Comments: