<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<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 ---------->
<!--nav sidebar -->
<aside>
<nav class="navbar navbar-inverse sidebar navbar-fixed-top" role="navigation">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="nav-side-menu">
<div class="brand">ESW Page layout</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Integrated Tariff Management
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<a href="#"><i class="fa fa-gift fa-lg"></i> HS Management <i class="fa fa-gift fa-lg btn pull-right" style="margin-top:5px"></i></a>
</li>
<ul class="sub-menu collapse" id="products">
<li class="active"><a href="#">HS Management</a></li>
<li><a href="#">HS Code List</a></li>
<li><a href="#">HS Group List</a></li>
<li><a href="#">Commodity Property List</a></li>
<li><a href="#">Specification Code List</a></li>
<li><a href="#">HS and Category Mapping</a></li>
<li><a href="#">CES Code and Parameter Mapping</a></li>
<li><a href="#">LPCO Property Mapping</a></li>
<li><a href="#">HS LPCO Mapping</a></li>
<li><a href="#">HS Specification Confirm List</a></li>
</ul>
</ul>
</div>
</div>
</nav>
</aside>
<div class="main">
<div class="layout-container">
<!-- Layout navbar -->
<div class="form-group pull-right">
<input type="text" class="search form-control" placeholder="Search">
</div>
<span class="counter pull-right"></span>
<!-- / Layout navbar -->
<!-- Layout content -->
<table id="hscodemgt" class="table table-hover table-bordered results">
<thead>
<tr>
<th>#</th>
<th class="col-md-5 col-xs-5">HS Code</th>
<th class="col-md-4 col-xs-4">HS Description</th>
<th class="col-md-3 col-xs-3">HS GroupId</th>
</tr>
<tr class="warning no-result">
<td colspan="4"><i class="fa fa-warning"></i> No result</td>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>01011000</td>
<td>LIVE HORSES,ASSESS MULES</td>
<td>1177</td>
</tr>
<tr>
<th scope="row">2</th>
<td>01021000</td>
<td>--PURE-BRED BREEDING ANIMALS</td>
<td>45</td>
</tr>
<tr>
<th scope="row">3</th>
<td>01031000</td>
<td>LIVE PURE-BRED</td>
<td>1245</td>
</tr>
<tr>
<th scope="row">4</th>
<td>01041000</td>
<td>ASSES</td>
<td>1193</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>#</th>
<th class="col-md-5 col-xs-5">HS Code</th>
<th class="col-md-4 col-xs-4">HS Description</th>
<th class="col-md-3 col-xs-3">HS GroupId</th>
</tr>
</tfoot>
</table>
</div>
</div>
/* Adding gvnix styles css - NO COPIAR */
@import 'http://geo-gvnix.rhcloud.com/resources/styles/standard.css';
/* Custom fixed navs */
header.navbar+nav.navbar{
/* margin-top: 20px;same margin-bottom .navbar */
}
.navbar.navbar-default.navbar-fixed-top{
margin-top: 50px;
}
.sidebar.navbar-fixed-top{
margin-top: 100px;
}
@media (min-width: 768px) and (max-width: 998px){
.navbar.navbar-default.navbar-fixed-top{
margin-top: 100px;
}
.sidebar.navbar-fixed-top{
margin-top: 150px;
}
}
/* Custom navbar default: global*/
.navbar.navbar-default{
background-color: #f8f8f8;
border-color: #e7e7e7;
margin: 0;
border-radius: 0;
}
.navbar.navbar-default .navbar-brand {
color: #666;
text-shadow: none;
min-width: 150px;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666;
text-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666;
text-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a:hover{
color: #acc47f;
}
.navbar.navbar-default .navbar-nav > .active > a{
color: #fff;
background-color: #acc47f;
}
.navbar.navbar-default .navbar-nav > .active > a:hover{
color: #608224;
background-color: #acc47f;
}
.navbar.navbar-default .caret {
border-top-color: #ccc;
border-bottom-color: #ccc;
}
.navbar.navbar-default .caret:hover {
border-top-color: #333;
border-bottom-color: #333;
}
/* Custom sidebar menu */
/*Remove rounded coners*/
nav.sidebar.navbar {
border-radius: 0px;
}
nav.sidebar, .main{
-webkit-transition: margin 200ms ease-out;
-moz-transition: margin 200ms ease-out;
-o-transition: margin 200ms ease-out;
transition: margin 200ms ease-out;
}
/* Add gap to nav and right windows.*/
.main{
padding: 10px 10px 0 10px;
}
/* .....NavBar: Icon only with coloring/layout.....*/
/*small/medium side display*/
@media (min-width: 768px) {
/*Allow main to be next to Nav*/
.main{
position: absolute;
width: calc(100% - 40px); /*keeps 100% minus nav size*/
margin-left: 40px;
float: right;
}
/*lets nav bar to be showed on mouseover*/
nav.sidebar:hover + .main{
margin-left: 200px;
}
/*Center Brand*/
nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
margin-left: 0px;
}
/*Center Brand*/
nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
text-align: center;
width: 100%;
margin-left: 0px;
}
/*Center Icons*/
nav.sidebar a{
padding-right: 13px;
min-width: 100px;
}
/*custom sidebar nav*/
nav.sidebar ul.nav.navbar-nav{
margin: 0;
}
nav.sidebar.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: white;
}
/*adds border top to first nav box */
nav.sidebar .navbar-nav > li:first-child{
border-top: 1px #e5e5e5 solid;
}
/*adds border to bottom nav boxes*/
nav.sidebar .navbar-nav > li{
border-bottom: 1px #e5e5e5 solid;
}
/*adds background on hover*/
nav.sidebar .navbar-nav > li:hover{
color: #fff;
background-color: #43600E;
}
/*removes border last element*/
nav.sidebar .navbar-nav > li.last{
border-bottom: none;
}
/* Colors/style dropdown box*/
nav.sidebar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
/*allows nav box to use 100% width*/
nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
padding: 0 0px 0 0px;
}
/*colors dropdown box text */
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
/*O quanto o menu irá esconder á esquerda*/
/*gives sidebar width/height*/
nav.sidebar{
width: 200px;
height: 100%;
margin-left: -270px;
float: left;
z-index: 8000;
margin-bottom: 0px;
}
/*give sidebar 100% width;*/
nav.sidebar li {
width: 100%;
}
/* Move nav to full on mouse over*/
nav.sidebar:hover{
margin-left: 0px;
}
/*for hiden things when navbar hidden*/
.forAnimate{
opacity: 0;
}
}
/* .....NavBar: Fully showing nav bar..... */
@media (min-width: 1330px) {
/* Allow main to be next to Nav
.main{
width: calc(100% - 200px); keeps 100% minus nav size
margin-left: 200px;
}
Show all nav
nav.sidebar{
margin-left: 0px;
float: left;
}
Show hidden items on nav
nav.sidebar .forAnimate{
opacity: 1;
} */
}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: #CCC;
background-color: transparent;
}
nav:hover .forAnimate{
opacity: 1;
}
/*---- FIM SLIDE MENU*/
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #00ABC3;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #00ABC3;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #0089A1;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #0089A1;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
@media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
@media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding:20px 20px;
}
.results tr[visible='false'],
.no-result{
display:none;
}
.results tr[visible='true']{
display:table-row;
}
.counter{
padding:8px;
color:#ccc;
}
//search by all fields
$(document).ready(function() {
$(".search").keyup(function () {
var searchTerm = $(".search").val();
var listItem = $('.results tbody').children('tr');
var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
$.extend($.expr[':'], {'containsi': function(elem, i, match, array){
return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
$(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e){
$(this).attr('visible','false');
});
$(".results tbody tr:containsi('" + searchSplit + "')").each(function(e){
$(this).attr('visible','true');
});
var jobCount = $('.results tbody tr[visible="true"]').length;
$('.counter').text(jobCount + ' item');
if(jobCount == '0') {$('.no-result').show();}
else {$('.no-result').hide();}
});
});
// search by title and re arrange
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#hscodemgt tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#hscodemgt').DataTable();
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
