"Polices"
Bootstrap 3.0.0 Snippet by jindalv

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>DataTables example - Bootstrap 3</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script> </head> <div class="container"> <div class="mail-box"> <div class="row"> <div class="col-md-12 header"> <img class="headerImage" src="http://www.bk.mufg.jp/global/globalnetwork/americas/imgs/city_13_l.jpg" alt="Smiley face" /> <div class="inbox-head"> <h3>Process Assets Library</h3> <h6>Below the list of all tha Process access Information Technology Clutser, Use the left panel to filter this list by <b>keyword</b>,<b>location</b> and <b>type</b></h6> </div> </div> </div> <div class="row"> <div class="col-md-3"> <aside class="sm-side"> <div class="inbox-body"> <div id="crumbs"> <span class="button-checkbox"> <a href="#">Local Procedures <input type="checkbox" class="hidden" value='LocalProcedures' /> </a> </span> <span class="button-checkbox"> <a href="#">Local Policies <input type="checkbox" class="hidden" value='LocalPolicies' /> </a> </span> <span class="button-checkbox"> <a href="#">Global Policies <input type="checkbox" class="hidden" value='GlobalPolicies' /> </a> </span> </div> </div> <div class="row"> <div class="col-md-12"> <div class="filterContainer"> <div class="filterHeader">Filter By:</div> <div class="filterBlocks"> <span>KEYWORD</span> <div> <input type="text" class="sr-input" placeholder="Search"> </div> </div> <div class="filterBlocks"> <span>LOCATION</span> <div class="locationFilter"> <p>Calgary</p> <p>Montreal</p> <p>Toronto</p> <p>Vancouver</p> <span class="label label-primary"><i class="glyphicon glyphicon-chevron-down"></i> View All</span> </div> </div> <div class="filterBlocks"> <span>LANGUAGE</span> <div class="languageFilter"> <p href="#">English</p> </div> </div> <div class="filterBlocks"> <span>SITE</span> <div class="siteFilter"> <p>Communications</p> <p>Treasury</p> <span class="label label-primary"><i class="glyphicon glyphicon-chevron-down"></i> View All</span> </div> </div> </div> </div> </div> </aside> </div> <div class="col-md-9"> <aside class="lg-side"> <div class="inbox-body"> <div class="filtersBox"> <h4>Selected Filters</h4> <div class="line-separator"> <div class="side-line-1"> </div> <div class="triangle"> </div> <div class="side-line-2"></div> <div class="dynamicFilters"> <span class='display LocalProcedures'>Local Procedures</span> <span class='display LocalPolicies'>Local Procedures</span> <span class='display GlobalPolicies'>Local Procedures</span> <span class='clearall'><img src='https://windsurfstuff.com/images/icons/close_white.svg' class='close-svg' id='close-all'>Clear All</span> </div> </div> <hr /> </div> <table class="table table-striped" id="dev-table"> <thead> <tr> <th></th> <th>Title</th> <th>Location</th> <th>Site</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td><img src="http://officeWebapp/_layouts/15/images/icdocx.png" /></td> <td><a href="#">PGM-DOM-ML-0118</a></td> <td>Montreal</td> <td>Communications</td> <td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td> </tr> <tr> <td><img src="http://officeWebapp/_layouts/15/images/icpdf.png" /></td> <td><a href="#">LA-d-9</a></td> <td>Calgary</td> <td>MTD</td> <td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td> </tr> <tr> <td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td> <td><a href="#">Crusher general Lockout</a></td> <td>Toronto</td> <td>Communications</td> <td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td> </tr> <tr> <td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td> <td><a href="#">Crusher general Lockout</a></td> <td>Vancouver</td> <td>Communications</td> <td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td> </tr> <tr> <td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td> <td><a href="#">General Lockout</a></td> <td>Vancouver</td> <td>Communications</td> <td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td> </tr> <tr> <td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td> <td><a href="#">General Lockout</a></td> <td>Vancouver</td> <td>Communications</td> <td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td> </tr> <tr> <td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td> <td><a href="#">General Lockout</a></td> <td>Vancouver</td> <td>Communications</td> <td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td> </tr> <tr> <td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td> <td><a href="#">General Lockout</a></td> <td>Vancouver</td> <td>Communications</td> <td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td> </tr> <tr> <td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td> <td><a href="#">General Lockout</a></td> <td>Vancouver</td> <td>Communications</td> <td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td> </tr> <tr> <td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td> <td><a href="#">General Lockout</a></td> <td>Vancouver</td> <td>Communications</td> <td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td> </tr><tr> <td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td> <td><a href="#">General Lockout</a></td> <td>Vancouver</td> <td>Communications</td> <td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td> </tr> <tr> <td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td> <td><a href="#">General Lockout</a></td> <td>Vancouver</td> <td>Communications</td> <td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td> </tr> <tr> <td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td> <td><a href="#">General Lockout</a></td> <td>Vancouver</td> <td>Communications</td> <td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td> </tr> <tr> <td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td> <td><a href="#">General Lockout</a></td> <td>Vancouver</td> <td>Communications</td> <td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td> </tr> <tr> <td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td> <td><a href="#">General Lockout</a></td> <td>Vancouver</td> <td>Communications</td> <td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td> </tr> <tr> <td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td> <td><a href="#">General Lockout</a></td> <td>Vancouver</td> <td>Communications</td> <td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td> </tr> <tr> <td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td> <td><a href="#">General Lockout</a></td> <td>Vancouver</td> <td>Communications</td> <td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td> </tr><tr> <td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td> <td><a href="#">General Lockout</a></td> <td>Vancouver</td> <td>Communications</td> <td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td> </tr> </tbody> </table> </div> </aside> </div> </div> </div> </div>
@import url("https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css") .mail-box { border-collapse: collapse; border-spacing: 0; display: table; table-layout: fixed; width: 100%; } .mail-box aside { display: table-cell; float: none; height: 100%; padding: 0; vertical-align: top; } .mail-box .sm-side { background: none repeat scroll 0 0; border-radius: 4px 0 0 4px; width: 25%; border-right: 2px solid #3498db; } .mail-box .lg-side { background: none repeat scroll 0 0 #fff; border-radius: 0 4px 4px 0; width: 10%; } .inbox-head { background: none repeat scroll 0 0 #e60000; border-radius: 0 4px 0 0; color: #fff; min-height: 80px; padding: 20px; } .inbox-head h3 { display: inline-block; font-weight: 300; margin: 0; padding-top: 6px; } .sr-input { color: #8a8a8a; height: 25px; padding: 0px 0px 0px 10px; margin: 0px 20px 0px 20px; } .inbox-head .sr-btn { background: none repeat scroll 0 0 #00a6b2; border: medium none; border-radius: 0 4px 4px 0; color: #fff; height: 40px; padding: 0 20px; } .table-inbox { border: 1px solid #d3d3d3; margin-bottom: 0; } .table-inbox tr td { padding: 12px !important; } .table-inbox tr td:hover { cursor: pointer; } .table-inbox tr td .fa-star.inbox-started, .table-inbox tr td .fa-star:hover { color: #f78a09; } .table-inbox tr td .fa-star { color: #d5d5d5; } .table-inbox tr.unread td { background: none repeat scroll 0 0 #f7f7f7; font-weight: 600; } ul.inbox-pagination { float: right; } ul.inbox-pagination li { float: left; } .mail-option { display: inline-block; margin-bottom: 10px; width: 100%; } .mail-option .chk-all, .mail-option .btn-group { margin-right: 5px; } .mail-option .chk-all, .mail-option .btn-group a.btn { background: none repeat scroll 0 0 #fcfcfc; border: 1px solid #e7e7e7; border-radius: 3px !important; color: #afafaf; display: inline-block; padding: 5px 10px; } .inbox-pagination a.np-btn { background: none repeat scroll 0 0 #fcfcfc; border: 1px solid #e7e7e7; border-radius: 3px !important; color: #afafaf; display: inline-block; padding: 5px 15px; } .mail-option .chk-all input[type="checkbox"] { margin-top: 0; } .mail-option .btn-group a.all { border: medium none; padding: 0; } .inbox-pagination a.np-btn { margin-left: 5px; } .inbox-pagination li span { display: inline-block; margin-right: 5px; margin-top: 7px; } .fileinput-button { background: none repeat scroll 0 0 #eeeeee; border: 1px solid #e6e6e6; } .inbox-body { margin-bottom: 10px; } .btn-send, .btn-send:hover { background: none repeat scroll 0 0 #00a8b3; color: #fff; } .btn-send:hover { background: none repeat scroll 0 0 #009da7; } .modal-header h4.modal-title { font-family: "Open Sans",sans-serif; font-weight: 300; } .modal-body label { font-family: "Open Sans",sans-serif; font-weight: 400; } ul { list-style-type: none; padding: 0px; margin: 0px; } #dev-table td:nth-child(1) { padding:5px 0px 0px 0px; width:1px; } #crumbs a { display: block; height: 40px; background: #ff4e4e; text-align: left; padding: 12px 0px 0 13px; position: relative; font-size: 13px; text-decoration: none; color: #fff; } #crumbs a:hover { background-color: #e60000 ; } #crumbs a:hover:after{ border-left: 10px solid #e60000; } .filterContainer { background-color:#E9E9E9; } .filterContainer .filterHeader { display: block; padding: 15px 0px 5px 0px; position: relative; margin: 0px 15px 2px 15px; font-size: 16px; text-decoration: none; border-bottom: 1px dashed grey; } .filterBlocks { padding-bottom :30px; border-bottom: 1px dashed grey; margin: 0px 15px 2px 15px; } .filterBlocks span { display: block; padding: 8px 10px 5px 0px; position: relative; margin: 10px 0px 0px 20px; font-size: 12px; text-decoration: none; width: 80px; } .filterBlocks p { margin: 6px 30px 0px 20px; font-size: 12px; text-transform: uppercase; font-weight: bold; } .headerImage{ float:right; width:120px; height:105px; margin-right:25px; border-right: 2px solid #fff; border-left: 2px solid #fff; } .state-icon { float: right; padding-right: 15px; } #crumbs a.active { background-color: #e60000 ; } #crumbs a.active:after{ border-left: 10px solid #e60000; content: ""; border-top: 20px solid white; border-bottom: 20px solid white; position: absolute; right: -10px; top: 0; } .side-line-1 { display: inline-block; border-top: 1px solid #e60000; width: 3%; } .side-line-2 { display: inline-block; border-top: 1px solid #e60000; width: 96%; } .triangle { display: inline-block; height: 7px; width: 7px; transform: rotate(45deg); border-top: 1px solid #e60000; border-left: 1px solid #e60000; margin-left: -3px; margin-right: -3px; margin-bottom: -2.9px; } hr { display: block; border-top: 1px solid #e60000; padding: 0; } .close-svg { width:10px; margin: 2px; } .display, .clearall{ display:none; background-color: red; padding: 6px; border-radius: 6px; font-weight: bold; color: #fff; } .dynamicFilters{ margin-top: 10px; } .siteSubFilter, .locationSubFilter, .languageSubFilter{ background-color: red; padding: 6px; border-radius: 6px; font-weight: bold; color: #fff; margin-right:10px; }
$(function () { $('.button-checkbox').each(function () { // Settings var $widget = $(this), $button = $widget.find('a'), $checkbox = $widget.find('input:checkbox'), color = $button.data('color'), settings = { on: { icon: 'glyphicon glyphicon-check' }, off: { icon: 'glyphicon glyphicon-unchecked' } }; // Event Handlers $button.on('click', function () { $checkbox.prop('checked', !$checkbox.is(':checked')); $checkbox.triggerHandler('change'); }); $checkbox.on('change', function () { updateDisplay(); }); // Actions function updateDisplay() { var isChecked = $checkbox.is(':checked'); var checkboxname = $checkbox.val(); // Set the button's state $button.data('state', (isChecked) ? "on" : "off"); // Set the button's icon $button.find('.state-icon') .removeClass() .addClass('state-icon ' + settings[$button.data('state')].icon); // Update the button's color if (isChecked) { $button .removeClass('btn-default') .addClass('active'); $(".display." + checkboxname).show(); $('.clearall').show(); } else { $button .removeClass('btn-' + color + ' active'); //.addClass('btn-default'); $('.display.' + checkboxname).hide(); } $('#close-all').click(function() { // $('input[type="checkbox"]').empty(); $('input[type=checkbox]').each(function() { this.checked = false; }); $('.display.' + checkboxname).hide(); $('.clearall').hide(); $button.removeClass('btn-' + color + ' active'); $button.data('state', 'off'); $button.find('.state-icon') .addClass('state-icon ' + settings[$button.data('state')].icon); $('.siteSubFilter').hide(); $('.languageSubFilter').hide(); $('.locationSubFilter').hide(); dataTable.fnFilter('',2); dataTable.fnFilter('',3); }); } // Initialization function init() { updateDisplay(); // Inject the icon if applicable if ($button.find('.state-icon').length === 0) { $button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i>'); } } init(); }); var dataTable = $('#dev-table').dataTable(); $(".siteFilter p").on('click', function () { $('.siteSubFilter').hide(); $('.clearall').show(); $('.dynamicFilters').prepend("<span class='siteSubFilter'>" + $(this).text() +"</span>"); dataTable.fnFilter($(this).text(), 3); }); $(".languageFilter p").on('click', function () { $('.languageSubFilter').hide(); $('.clearall').show(); $('.dynamicFilters').prepend("<span class='languageSubFilter'>" + $(this).text() +"</span>"); }); $(".locationFilter p").on('click', function () { $('.locationSubFilter').hide(); $('.clearall').show(); $('.dynamicFilters').prepend("<span class='locationSubFilter'>" + $(this).text() +"</span>"); dataTable.fnFilter($(this).text(), 2); }); $('input.sr-input').on( 'keyup click', function () { dataTable.fnFilter($(this).val(), 1); } ); });

Related: See More


Questions / Comments: