Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"prj_1"
Bootstrap 4.0.0 Snippet by
Cp007
4.0.0
jQuery
Preview
HTML
CSS
JS
View Full Screen
Fork
Fork this
716
 
0 Fav
Post to Facebook
Tweet this
<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
Template
Vue Now UI Kit PRO
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76