Commit 2e3743ac authored by đinh thị đầm's avatar đinh thị đầm

paging

parent 3b48a118
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Glance Design Dashboard an Admin Panel Category Flat Bootstrap Responsive Website Template | 404 error page :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- font-awesome icons CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons CSS -->
<!-- side nav css file -->
<link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<!-- side nav css file -->
<!-- js-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!--webfonts-->
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
<!--//webfonts-->
<!-- Metis Menu -->
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<link href="css/custom.css" rel="stylesheet">
<!--//Metis Menu -->
</head>
<body class="cbp-spmenu-push">
<div class="main-content">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<!--left-fixed -navigation-->
<aside class="sidebar-left">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1><a class="navbar-brand" href="index.html"><span class="fa fa-area-chart"></span> Glance<span class="dashboard_text">Design dashboard</span></a></h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="index.html">
<span class="glyphicon glyphicon-user"></span></i> <span>Employee</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Components</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
<li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
</ul>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="widgets.html">
<i class="fa fa-th"></i> <span>Widgets</span>
<small class="label pull-right label-info">08</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="tables.html"><i class="fa fa-angle-right"></i> Simple tables</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<i class="fa fa-angle-left pull-right"></i><small class="label pull-right label-info1">08</small><span class="label label-primary1 pull-right">02</span></a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="404.html"><i class="fa fa-angle-right"></i> 404 Error</a></li>
<li><a href="500.html"><i class="fa fa-angle-right"></i> 500 Error</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</aside>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<!--notification menu end -->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div><!--//end-search-box-->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
<li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
<li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page">
<h3 class="title1">404 Error Page</h3>
<div class="error-page">
<div class="">
<h2>404</h2>
</div>
<div class="">
<h3><i class="fa fa-warning text-yellow"></i> Oops! Page Not Found.</h3>
<form action="#" method="post" class="search-form">
<div class="input-group">
<input type="text" name="search" class="form-control" placeholder="Search" required="">
<div class="input-group-btn">
<button type="submit" name="submit" class="btn btn-warning btn-flat"><i class="fa fa-search"></i>
</button>
</div>
</div>
<!-- /.input-group -->
</form>
</div>
<p>We could not find the page you were looking for. Meanwhile, you may return to dashboard or try using the search form.</p>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<p>&copy; 2018 Glance Design Dashboard. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">w3layouts</a></p>
</div>
<!--//footer-->
</div>
<!-- side nav js -->
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
$('.sidebar-menu').SidebarNav()
</script>
<!-- //side nav js -->
<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
function disableOther( button ) {
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
}
</script>
<!-- //Classie --><!-- //for toggle left push menu script -->
<!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>
</body>
</html>
\ No newline at end of file
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Glance Design Dashboard an Admin Panel Category Flat Bootstrap Responsive Website Template | 500 error page :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- font-awesome icons CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons CSS -->
<!-- side nav css file -->
<link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<!-- side nav css file -->
<!-- js-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!--webfonts-->
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
<!--//webfonts-->
<!-- Metis Menu -->
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<link href="css/custom.css" rel="stylesheet">
<!--//Metis Menu -->
</head>
<body class="cbp-spmenu-push">
<div class="main-content">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<!--left-fixed -navigation-->
<aside class="sidebar-left">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1><a class="navbar-brand" href="index.html"><span class="fa fa-area-chart"></span> Glance<span class="dashboard_text">Design dashboard</span></a></h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="index.html">
<span class="glyphicon glyphicon-user"></span> <span>Employee</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Components</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
<li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
</ul>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="widgets.html">
<i class="fa fa-th"></i> <span>Widgets</span>
<small class="label pull-right label-info">08</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="tables.html"><i class="fa fa-angle-right"></i> Simple tables</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<i class="fa fa-angle-left pull-right"></i><small class="label pull-right label-info1">08</small><span class="label label-primary1 pull-right">02</span></a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="404.html"><i class="fa fa-angle-right"></i> 404 Error</a></li>
<li><a href="500.html"><i class="fa fa-angle-right"></i> 500 Error</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</aside>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<!--notification menu end -->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div><!--//end-search-box-->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
<li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
<li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page">
<h3 class="title1">500 Error Page</h3>
<div class="error-page">
<div class="">
<h2>500</h2>
</div>
<div class="">
<h3><i class="fa fa-warning text-yellow"></i> Oops! Something Went Wrong.</h3>
<form action="#" method="post" class="search-form">
<div class="input-group">
<input type="text" name="search" class="form-control" placeholder="Search" required="">
<div class="input-group-btn">
<button type="submit" name="submit" class="btn btn-warning btn-flat"><i class="fa fa-search"></i>
</button>
</div>
</div>
<!-- /.input-group -->
</form>
</div>
<p>We could not find the page you were looking for. Meanwhile, you may return to dashboard or try using the search form.</p>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<p>&copy; 2018 Glance Design Dashboard. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">w3layouts</a></p>
</div>
<!--//footer-->
</div>
<!-- side nav js -->
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
$('.sidebar-menu').SidebarNav()
</script>
<!-- //side nav js -->
<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
function disableOther( button ) {
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
}
</script>
<!-- //Classie --><!-- //for toggle left push menu script -->
<!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
</body>
</html>
\ No newline at end of file
...@@ -106,15 +106,7 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony ...@@ -106,15 +106,7 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li> <li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul> </ul>
</li> </li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="tables.html"><i class="fa fa-angle-right"></i> Simple tables</a></li>
</ul>
</li>
<li class="treeview"> <li class="treeview">
<a href="#"> <a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span> <i class="fa fa-envelope"></i> <span>Mailbox</span>
...@@ -132,8 +124,7 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony ...@@ -132,8 +124,7 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony
<ul class="treeview-menu"> <ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li> <li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li> <li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="404.html"><i class="fa fa-angle-right"></i> 404 Error</a></li>
<li><a href="500.html"><i class="fa fa-angle-right"></i> 500 Error</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li> <li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul> </ul>
</li> </li>
...@@ -385,7 +376,6 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony ...@@ -385,7 +376,6 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony
<!-- //Classie --><!-- //for toggle left push menu script --> <!-- //Classie --><!-- //for toggle left push menu script -->
<!--scrolling js--> <!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script> <script src="js/scripts.js"></script>
<!--//scrolling js--> <!--//scrolling js-->
......
...@@ -106,15 +106,7 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony ...@@ -106,15 +106,7 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li> <li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul> </ul>
</li> </li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="tables.html"><i class="fa fa-angle-right"></i> Simple tables</a></li>
</ul>
</li>
<li class="treeview"> <li class="treeview">
<a href="#"> <a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span> <i class="fa fa-envelope"></i> <span>Mailbox</span>
...@@ -132,8 +124,7 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony ...@@ -132,8 +124,7 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony
<ul class="treeview-menu"> <ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li> <li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li> <li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="404.html"><i class="fa fa-angle-right"></i> 404 Error</a></li>
<li><a href="500.html"><i class="fa fa-angle-right"></i> 500 Error</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li> <li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul> </ul>
</li> </li>
......
...@@ -13,7 +13,7 @@ html, body{ ...@@ -13,7 +13,7 @@ html, body{
font-family: 'PT Sans', sans-serif; font-family: 'PT Sans', sans-serif;
font-size: 100%; font-size: 100%;
overflow-x: hidden; overflow-x: hidden;
background: #fff; /*background: #fff;*/
} }
body a{ body a{
transition: 0.5s all ease; transition: 0.5s all ease;
...@@ -1314,7 +1314,7 @@ h3.hdg { ...@@ -1314,7 +1314,7 @@ h3.hdg {
.label { .label {
font-weight: 300 !important; font-weight: 300 !important;
border-radius:4px; border-radius:4px;
} }
.grid_3 { .grid_3 {
padding: 1.5em 1em; padding: 1.5em 1em;
} }
...@@ -1340,9 +1340,9 @@ h3.hdg { ...@@ -1340,9 +1340,9 @@ h3.hdg {
.badge-danger { .badge-danger {
background-color: #e51c23; background-color: #e51c23;
} }
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { /*.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {*/
border-top: none; /* border-top: none;*/
} /*}*/
.grid_3 p{ .grid_3 p{
line-height: 2em; line-height: 2em;
color: #888; color: #888;
...@@ -1439,16 +1439,16 @@ section#tables p { ...@@ -1439,16 +1439,16 @@ section#tables p {
.tables .panel-body ,.tables .bs-example{ .tables .panel-body ,.tables .bs-example{
padding: 2em 2em 0.5em; padding: 2em 2em 0.5em;
} }
.tables .table > thead > tr > th, .tables .table > tbody > tr > th, .tables .table > tfoot > tr > th, .tables .table > thead > tr > td, .tables .table > tbody > tr > td, .tables .table > tfoot > tr > td { /*.tables .table > thead > tr > th, .tables .table > tbody > tr > th, .tables .table > tfoot > tr > th, .tables .table > thead > tr > td, .tables .table > tbody > tr > td, .tables .table > tfoot > tr > td {*/
padding: 13px; /* padding: 13px;*/
border-top: 1px solid #E0E0E0; /* border-top: 1px solid #E0E0E0;*/
} /*}*/
.bs-example { .bs-example {
margin-top: 2em; margin-top: 2em;
} }
.table-hover > tbody > tr:hover { /*.table-hover > tbody > tr:hover {*/
background-color: #E8E6E6; /* background-color: #E8E6E6;*/
} /*}*/
/*--//table--*/ /*--//table--*/
/*--forms--*/ /*--forms--*/
.forms h4 { .forms h4 {
...@@ -2740,61 +2740,7 @@ header.widget-header h4 { ...@@ -2740,61 +2740,7 @@ header.widget-header h4 {
font-size: 19px; font-size: 19px;
color:#000; color:#000;
} }
.widgettable .table {
margin-bottom: 0;
}
.widgettable .table-bordered,.widgettable .table-bordered>tbody>tr>td,.widgettable .table-bordered>tbody>tr>th,.widgettable .table-bordered>tfoot>tr>td,.widgettable .table-bordered>tfoot>tr>th,.widgettable .table-bordered>thead>tr>td,.widgettable .table-bordered>thead>tr>th {
border: 1px solid #F5F5F5;
}
.widgettable .table {
width: 100%;
max-width: 100%;
margin-bottom: 16px;
}
.widgettable pre code,.widgettable table {
background-color: transparent;
}
.widgettable table {
border-collapse: collapse;
border-spacing: 0;
}
.widgettable .table>caption+thead>tr:first-child>td,.widgettable .table>caption+thead>tr:first-child>th,.widgettable .table>colgroup+thead>tr:first-child>td,.widgettable .table>colgroup+thead>tr:first-child>th,.widgettable .table>thead:first-child>tr:first-child>td,.widgettable .table>thead:first-child>tr:first-child>th {
border-top: 0;
font-weight: 600;
color: #000;
}
.widgettable .table-bordered>thead>tr>th {
border-left: 0;
}
.widgettable .table>tbody>tr>td,.widgettable .table>tbody>tr>th,.widgettable .table>tfoot>tr>td,.widgettable .table>tfoot>tr>th,.widgettable .table>thead>tr>td,.widgettable .table>thead>tr>th {
padding: 12px;
}
.widgettable .table>thead>tr>th {
background-color: #fff;
vertical-align: middle;
font-weight: 500;
color: #333;
border-width: 1px;
}
.btn, .m-sidebar header h2, .p-menu>li>a, .popover-title, .table>thead>tr>th {
text-transform: capitalize;
}
.widgettable .table-bordered>thead>tr>td,.widgettable .table-bordered>thead>tr>th {
border-bottom-width: 2px;
}
.widgettable .table-bordered,.widgettable .table-bordered>tbody>tr>td,.widgettable .table-bordered>tbody>tr>th,.widgettable .table-bordered>tfoot>tr>td,.widgettable .table-bordered>tfoot>tr>th,.widgettable .table-bordered>thead>tr>td,.widgettable .table-bordered>thead>tr>th {
border: 1px solid #F5F5F5;
}
.widgettable .table>thead>tr>th {
vertical-align: bottom;
border-bottom: 2px solid #F5F5F5;
}
.widgettable .table>tbody>tr>td,.widgettable .table>tbody>tr>th,.widgettable .table>tfoot>tr>td,.widgettable .table>tfoot>tr>th,.widgettable .table>thead>tr>td,.widgettable .table>thead>tr>th {
padding: 15px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #F5F5F5;
}
*, :active, :focus, :hover { *, :active, :focus, :hover {
outline: 0!important; outline: 0!important;
-webkit-tap-highlight-color: transparent!important; -webkit-tap-highlight-color: transparent!important;
...@@ -3345,9 +3291,9 @@ ul.bt-list li a { ...@@ -3345,9 +3291,9 @@ ul.bt-list li a {
.col-24 { .col-24 {
background-color: #4c4c4c; background-color: #4c4c4c;
} }
.col-8 { /*.col-8 {*/
background-color: #739b9d; /* background-color: #739b9d;*/
} /*}*/
.col-9 { .col-9 {
background-color: #3598db; background-color: #3598db;
} }
...@@ -8477,12 +8423,12 @@ table{ ...@@ -8477,12 +8423,12 @@ table{
letter-spacing: 2px; letter-spacing: 2px;
} }
#myFooter { #myFooter {
background-color: #373a48; /*background-color: #373a48;*/
color:white; color:white;
} }
#myFooter .footer-copyright{ #myFooter .footer-copyright{
background-color: #383737; /*background-color: #383737;*/
padding-top:3px; padding-top:3px;
padding-bottom:3px; padding-bottom:3px;
text-align: center; text-align: center;
...@@ -8561,10 +8507,6 @@ table{ ...@@ -8561,10 +8507,6 @@ table{
/* CSS used for positioning the footers at the bottom of the page. */
/* You can remove this. */
html{ html{
height: 100% !important; height: 100% !important;
} }
...@@ -8587,3 +8529,40 @@ body{ ...@@ -8587,3 +8529,40 @@ body{
flex: 0 0 auto; flex: 0 0 auto;
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
} }
td{
border: 1px solid #000;
padding: 15px;
text-align : center;
}
th{
border: 1px solid #000;
padding: 15px;
text-align : center;
}
tr:nth-child(2n+1) td{
background-color: #deecff;
}
tr:nth-child(2n+4) td{
background-color: #f0e9e9;
}
tr:nth-child(n+2) td:last-child{
color: #060608;
font-weight: bold;
}
tr:nth-child(n+3) td:first-child{
font-weight:bold;
color: #060608;
}
tr:nth-child(n+3) td:nth-child(even){
color: #060608;
}
tr:nth-child(n+3) td:nth-child(odd):not(:first-child){
color: #060608;
}
.table>tbody>tr>td{
font-family: sans-serif;
font-size: 16px;
text-align: center;
}
\ No newline at end of file
...@@ -196,15 +196,7 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony ...@@ -196,15 +196,7 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li> <li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul> </ul>
</li> </li>
<li class="treeview"> <
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="tables.html"><i class="fa fa-angle-right"></i> Simple tables</a></li>
</ul>
</li>
<li class="treeview"> <li class="treeview">
<a href="#"> <a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox </span> <i class="fa fa-envelope"></i> <span>Mailbox </span>
...@@ -222,8 +214,6 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony ...@@ -222,8 +214,6 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony
<ul class="treeview-menu"> <ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li> <li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li> <li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="404.html"><i class="fa fa-angle-right"></i> 404 Error</a></li>
<li><a href="500.html"><i class="fa fa-angle-right"></i> 500 Error</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li> <li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul> </ul>
</li> </li>
...@@ -454,7 +444,7 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony ...@@ -454,7 +444,7 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony
<div id="page-wrapper"> <div id="page-wrapper">
<div class="main-page"> <div class="main-page">
<div ui-view="content"> <div ui-view="content">
Content222 <!-- Content222-->
</div> </div>
</div> </div>
</div> </div>
...@@ -671,10 +661,8 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony ...@@ -671,10 +661,8 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony
} }
} }
</script> </script>
<!-- //Classie --><!-- //for toggle left push menu script -->
<!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script> <script src="js/scripts.js"></script>
<!--//scrolling js--> <!--//scrolling js-->
......
<div class="container"> <div class="container">
<div class="col-8">
<table class="table">
<tr> <table class="table">
<td><label>User Name</label></td> <form>
<td> <div class="form-row">
<input type="text" maxlength="29" ng-model="emp.username"/> <div class="col">
</td> <tr>
</tr> <td><label>User Name</label></td>
<tr> <td>
<td><label>First Name</label></td> <input type="text" maxlength="29" ng-model="emp.username"/>
<td> </td>
<input type="text" maxlength="29" ng-model="emp.firstName"/> </tr>
</td> <tr>
</tr> <td><label>First Name</label></td>
<tr> <td>
<td><label>Last Name</label></td> <input type="text" maxlength="29" ng-model="emp.firstName"/>
<td> </td>
<input type="text" maxlength="29" ng-model="emp.lastName"/> </tr>
</td> <tr>
</tr> <td><label>Last Name</label></td>
<tr> <td>
<td><label id="email" for="email">Email</label></td> <input type="text" maxlength="29" ng-model="emp.lastName"/>
<td> </td>
<input type="email" maxlength="150" ng-model="emp.emailAddress"/> </tr>
</td> <tr>
</tr> <td><label id="email" for="email">Email</label></td>
<tr> <td>
<td><label>Phone</label></td> <input class="form-check-label" type="email" maxlength="150" ng-model="emp.emailAddress"/>
<td> </td>
<input type="text" maxlength="10" value="" ng-model="emp.phoneNumber"/> </tr>
</td> <tr>
</tr> <td><label>Phone</label></td>
<td>
<tr> <input type="text" maxlength="10" value="" ng-model="emp.phoneNumber"/>
<td><label>Education</label></td> </td>
<td> </tr>
<input type="text" ng-model="emp.education"/> </div>
</td> <div class="col">
</tr> <tr>
<tr> <td><label>Education</label></td>
<td><label>Home town</label></td> <td>
<td><input type="text" ng-model="emp.homeTown"/></td> <input type="text" ng-model="emp.education"/>
</tr> </td>
<tr> </tr>
<td><label>Department</label></td> <tr>
<td><input type="text" ng-model="emp.department"/></td> <td><label>Home town</label></td>
</tr> <td><input type="text" ng-model="emp.homeTown"/></td>
<tr> </tr>
<td><label>Position</label></td> <tr>
<td><input type="text" ng-model="emp.position"/></td> <td><label>Department</label></td>
</tr> <td><input type="text" ng-model="emp.department"/></td>
<tr> </tr>
<td></td> <tr>
<td><label>Position</label></td>
<td><input type="text" ng-model="emp.position"/></td>
</tr>
<tr>
</div>
</div>
</form>
<td></td>
<td> <td>
<input type="submit" name="submit" value="submit" ng-click="save();"/> <input class="btn btn-primary" type="submit" name="submit" value="submit" ng-click="save();"/>
<input type="submit" name="clear" value="clear" ng-click=" emp = null"/> <input class="btn btn-primary" type="submit" name="clear" value="clear" ng-click=" emp = null"/>
</td> </td>
</tr> </tr>
</table> </table>
</div>
</div> </div>
\ No newline at end of file
...@@ -3,16 +3,19 @@ ...@@ -3,16 +3,19 @@
<div class="col-md-8"> <div class="col-md-8">
<tr> <tr>
<td><a class="btn btn-info" href="#" ui-sref="createEmployee">Add</a></td> <td><a href="#addEmployeeModal" ui-sref="createEmployee" class="btn btn-success" data-toggle="modal"><i
class="fa fa-user-plus"></i> <span>Add New Employee</span></a></a></td>
</tr> </tr>
<h4>{{emp.length}}</h4> <h4>{{emp.length}}</h4>
<tr></tr>
<input class="search" ng-model="keyword" type="text" placeholder="Search" ng-change="currentPage =1">
<tr></tr>
<h2>Thông tin nhân viên</h2>
<table class="table">
<input ng-model="keyword" type="text" placeholder="Tìm kiếm" ng-change="currentPage =1">
<table class="table" >
<thead> <thead>
<tr>
<td colspan="12">Thông tin nhân viên</td>
</tr>
<tr> <tr>
<th>ID</th> <th>ID</th>
<th>UserName</th> <th>UserName</th>
...@@ -28,7 +31,8 @@ ...@@ -28,7 +31,8 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="vide" ng-repeat="emp in employess | filter:{username:keyword} | lmto:3:3*(currentPage-1) track by $index"> <tr class="vide"
ng-repeat="emp in employess | filter:{username:keyword} | lmto:3:3*(currentPage-1) track by $index">
<td>{{$index + 1}}</td> <td>{{$index + 1}}</td>
<td>{{emp.username}}</td> <td>{{emp.username}}</td>
<td>{{emp.firstName}}</td> <td>{{emp.firstName}}</td>
...@@ -39,8 +43,18 @@ ...@@ -39,8 +43,18 @@
<td>{{emp.homeTown}}</td> <td>{{emp.homeTown}}</td>
<td>{{emp.department}}</td> <td>{{emp.department}}</td>
<td>{{emp.position}}</td> <td>{{emp.position}}</td>
<td><a href="#" ng-click="updateEmp(emp);">Edit</a> <td><a href="#" ng-click="updateEmp(emp);">
<td><a href="#" ng-click="deleteEmp(emp);">Delete</a> <p data-placement="top" data-toggle="tooltip" title="Edit">
<button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal"
data-target="#edit"><span class="glyphicon glyphicon-pencil"></span></button>
</p>
</a></td>
<td><a href="#" ng-click="deleteEmp(emp);">
<p data-placement="top" data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal"
data-target="#delete"><span class="glyphicon glyphicon-trash"></span></button>
</p>
</a></td>
</td> </td>
</tr> </tr>
...@@ -50,9 +64,9 @@ ...@@ -50,9 +64,9 @@
</table> </table>
<!-- <uib-pagination ng-if="employess.length" total-items="getTotalItems()" boundary-link-numbers="true" ng-model="currentPage" ng-change="pageChangedIndex()" rotate="true" items-per-page="employeePerPage"></uib-pagination>--> <uib-pagination total-items="getTotalItems()" boundary-link-numbers="true" ng-model="currentPage"
<uib-pagination total-items="getTotalItems()" boundary-link-numbers="true" ng-model="currentPage" ng-change="pageChangedIndex()" rotate="true" items-per-page="employeePerPage"></uib-pagination> ng-change="pageChangedIndex()" rotate="true"
items-per-page="employeePerPage"></uib-pagination>
</div> </div>
......
...@@ -79,8 +79,7 @@ angular.module("myApp").controller("employeeController", function ($scope, $http ...@@ -79,8 +79,7 @@ angular.module("myApp").controller("employeeController", function ($scope, $http
} }
// HTTP DELETE- delete employee by Id
// Call: http://localhost:8080/employee/{id}
$scope.deleteEmp = function (emp) { $scope.deleteEmp = function (emp) {
$http({ $http({
method: 'DELETE', method: 'DELETE',
...@@ -119,18 +118,6 @@ angular.module("myApp").controller("employeeController", function ($scope, $http ...@@ -119,18 +118,6 @@ angular.module("myApp").controller("employeeController", function ($scope, $http
} }
// $http({
// method: 'GET',
// url: "http://localhost:8081/list_employee/"
// }).then(function successCallback(response) {
// console.log(response);
//
// $scope.employess = response.data;
// }, function errorCallback(response) {
// console.log(response)
// });
}); });
......
<div class="container" ng-app="myApp">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>{{ title }}</h1>
</div>
</div>
<div ui-view></div>
</div>
<script type="text/ng-template" id="login.html">
<div class="col-md-12">
<h3>Login Page</h3>
<form ng-submit="formSubmit()" class="form">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" ng-model="username" placeholder="username" required=""/>
</div>
<div class="form-group">
<input type="password" class="form-control" ng-model="password" placeholder="password" required=""/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Login</button>
<span class="text-danger">{{ error }}</span>
</div>
</div>
</form>
</div>
</script>
<script type="text/ng-template" id="home.html">
<div class="col-md-12">
<h3>Home Page</h3>
<a ui-sref="login">Back</a>
</div>
</script>
</div>
\ No newline at end of file
angular.module("myApp").controller("loginController" , function ($rootScope, $location, $state) {
console.log("Login Controller")
})
\ No newline at end of file
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Glance Design Dashboard an Admin Panel Category Flat Bootstrap Responsive Website Template | Tables :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- font-awesome icons CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons CSS -->
<!-- side nav css file -->
<link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<!-- side nav css file -->
<!-- js-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!--webfonts-->
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
<!--//webfonts-->
<!-- Metis Menu -->
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<link href="css/custom.css" rel="stylesheet">
<!--//Metis Menu -->
</head>
<body class="cbp-spmenu-push">
<div class="main-content">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<!--left-fixed -navigation-->
<aside class="sidebar-left">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1><a class="navbar-brand" href="index.html"><span class="fa fa-area-chart"></span> Glance<span class="dashboard_text">Design dashboard</span></a></h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="index.html">
<span class="glyphicon glyphicon-user"></span> <span>Employee</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Components</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
<li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
</ul>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="widgets.html">
<i class="fa fa-th"></i> <span>Widgets</span>
<small class="label pull-right label-info">08</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="tables.html"><i class="fa fa-angle-right"></i> Simple tables</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<i class="fa fa-angle-left pull-right"></i><small class="label pull-right label-info1">08</small><span class="label label-primary1 pull-right">02</span></a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="404.html"><i class="fa fa-angle-right"></i> 404 Error</a></li>
<li><a href="500.html"><i class="fa fa-angle-right"></i> 500 Error</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</aside>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<!--notification menu end -->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div><!--//end-search-box-->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
<li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
<li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page">
<div class="tables">
<h2 class="title1">Tables</h2>
<div class="panel-body widget-shadow">
<h4>Basic Table:</h4>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="bs-example widget-shadow" data-example-id="bordered-table">
<h4>Bordered Basic Table:</h4>
<table class="table table-bordered"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
</div>
<div class="bs-example widget-shadow" data-example-id="hoverable-table">
<h4>Hover Rows Table:</h4>
<table class="table table-hover"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
</div>
<div class="bs-example widget-shadow" data-example-id="contextual-table">
<h4>Colored Rows Table:</h4>
<table class="table"> <thead> <tr> <th>#</th> <th>Column heading</th> <th>Column heading</th> <th>Column heading</th> </tr> </thead> <tbody> <tr class="active"> <th scope="row">1</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <th scope="row">2</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="success"> <th scope="row">3</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <th scope="row">4</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="info"> <th scope="row">5</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <th scope="row">6</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="warning"> <th scope="row">7</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <th scope="row">8</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="danger"> <th scope="row">9</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> </tbody> </table>
</div>
<div class="table-responsive bs-example widget-shadow">
<h4>Responsive Table:</h4>
<table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <th scope="row">2</th> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <th scope="row">3</th> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> </tbody> </table>
</div>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<p>&copy; 2018 Glance Design Dashboard. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">w3layouts</a></p>
</div>
<!--//footer-->
</div>
<!-- side nav js -->
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
$('.sidebar-menu').SidebarNav()
</script>
<!-- //side nav js -->
<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
function disableOther( button ) {
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
}
</script>
<!-- //Classie --><!-- //for toggle left push menu script -->
<!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment