<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.0.0/jq-3.2.1/dt-1.10.16/datatables.min.css"/> <script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.0.0/jq-3.2.1/dt-1.10.16/datatables.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div class="mail-box"> <aside class="lg-side"> <div class="inbox-head"> <h3>Nhân Viên</h3> <form action="#" class="pull-right position"> <div class="input-append"> <input type="text" class="sr-input" placeholder="Tìm kiếm"> <button class="btn sr-btn" type="button"><i class="fa fa-search"></i></button> </div> </form> </div> <button class="btn btn-default pull-right" style="margin-top:20px;" data-toggle="modal" data-target= "#item_add"><i class="glyphicon glyphicon-plus"></i> Thêm nhân viên</button> <div class="inbox-body"> <div class="mail-option"> <table class="table table-inbox table-hover" id="example"> <thead> <tr class="unread"> <th class="col-sm-2 view-message dont-show">Mã nhân viên</th> <th class="view-message col-sm-3">Họ và tên</th> <th></th> <th></th> <th class="col-sm-2"> <span>Tình trạng <div> <span class="label label-success pull-left"> </span> <span class="label label-info pull-left"> </span> <span class="label label-warning pull-left"> </span> <span class="label label-danger pull-left"> </span> </div> </span> </th> <th class="view-message text-left col-sm-2">Chức vụ</th> <th class="col-sm-1"></th> </tr> </thead> <tbody> <tr > <td onclick="myFunction(this)" class="view-message dont-show"><h5>NV0001</h5></td> <td onclick="myFunction(this)" colspan="3" class="view-message"><h5>Tên của nhân viên</h5></td> <td onclick="myFunction(this)"><h4 style="margin-top: 5px;"><span class="label label-success " >Làm việc</span></h4></td> <td onclick="myFunction(this)" class="view-message text-left"><h5>Chức vụ</h5></td> <td> <span class="btn-group pull-right" style="margin-top: 5px"> <button class="btn btn-warning btn-xs" data-toggle="modal" data-target= "#item_edit"><i class="glyphicon glyphicon-edit" ></i></button> <button class="btn btn-danger btn-xs"; data-toggle="modal" data-target="#item_remove"><i class="glyphicon glyphicon-remove" ></i></button> </span> </td> </tr> <tr class=""> <td onclick="myFunction(this)" class="view-message dont-show"><h5>NV0001</h5></td> <td onclick="myFunction(this)" colspan="3" class="view-message"><h5>Tên của nhân viên</h5></td> <td onclick="myFunction(this)"><h4 style="margin-top: 5px;"><span class="label label-danger">Thôi việc</span></h5></td> <td onclick="myFunction(this)" class="view-message text-left"><h5>Chức vụ</h5></td> <td > <span class="btn-group pull-right" style="margin-top: 5px"> <button class="btn btn-warning btn-xs" data-toggle="modal" data-target= "#item_edit"><i class="glyphicon glyphicon-edit" ></i></button> <button class="btn btn-danger btn-xs"; data-toggle="modal" data-target="#item_remove"><i class="glyphicon glyphicon-remove" ></i></button> </span> </td> </tr> <tr class=""> <td onclick="myFunction(this)" class="view-message dont-show"><h5>NV0001</h5></td> <td onclick="myFunction(this)" colspan="3" class="view-message"><h5>Tên của nhân viên</h5></td> <td onclick="myFunction(this)"><h4 style="margin-top: 5px;"><span class="label label-success " >Làm việc</span></h4></td> <td onclick="myFunction(this)" class="view-message text-left"><h5>Chức vụ</h5></td> <td > <span class="btn-group pull-right" style="margin-top: 5px"> <button class="btn btn-warning btn-xs" data-toggle="modal" data-target= "#item_edit"><i class="glyphicon glyphicon-edit" ></i></button> <button class="btn btn-danger btn-xs"; data-toggle="modal" data-target="#item_remove"><i class="glyphicon glyphicon-remove" ></i></button> </span> </td> </tr> <tr class=""> <td onclick="myFunction(this)" class="view-message dont-show"><h5>NV0001</h5></td> <td onclick="myFunction(this)" colspan="3" class="view-message"><h5>Tên của nhân viên</h5></td> <td onclick="myFunction(this)"><h4 style="margin-top: 5px;"><span class="label label-success " >Làm việc</span></h4></td> <td onclick="myFunction(this)" class="view-message text-left"><h5>Chức vụ</h5></td> <td > <span class="btn-group pull-right" style="margin-top: 5px"> <button class="btn btn-warning btn-xs" data-toggle="modal" data-target= "#item_edit"><i class="glyphicon glyphicon-edit" ></i></button> <button class="btn btn-danger btn-xs"; data-toggle="modal" data-target="#item_remove"><i class="glyphicon glyphicon-remove" ></i></button> </span> </td> </tr> <tr class=""> <td onclick="myFunction(this)" class="view-message dont-show"><h5>NV0001</h5></td> <td onclick="myFunction(this)" colspan="3" class="view-message"><h5>Tên của nhân viên</h5></td> <td onclick="myFunction(this)"><h4 style="margin-top: 5px;"><span class="label label-warning">Tập huấn</span></h4></td> <td onclick="myFunction(this)" class="view-message text-left"><h5>Chức vụ</h5></td> <td > <span class="btn-group pull-right" style="margin-top: 5px"> <button class="btn btn-warning btn-xs" data-toggle="modal" data-target= "#item_edit"><i class="glyphicon glyphicon-edit" ></i></button> <button class="btn btn-danger btn-xs"; data-toggle="modal" data-target="#item_remove"><i class="glyphicon glyphicon-remove" ></i></button> </span> </td> </tr> <tr class=""> <td onclick="myFunction(this)" class="view-message dont-show"><h5>NV0001</h5></td> <td onclick="myFunction(this)" colspan="3" class="view-message"><h5>Tên của nhân viên</h5></td> <td onclick="myFunction(this)"><h4 style="margin-top: 5px;"><span class="label label-info">Công tác</span></h4></td> <td onclick="myFunction(this)" class="view-message text-left"><h5>Chức vụ</h5></td> <td > <span class="btn-group pull-right" style="margin-top: 5px"> <button class="btn btn-warning btn-xs" data-toggle="modal" data-target= "#item_edit"><i class="glyphicon glyphicon-edit" ></i></button> <button class="btn btn-danger btn-xs"; data-toggle="modal" data-target="#item_remove"><i class="glyphicon glyphicon-remove" ></i></button> </span> </td> </tbody> </table> </div> </div> <div class="text-center"> <ul class="pagination"> <li class="disabled"><span>«</span></li> <li class="active"><span>1</span></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li class="disabled"><span>...</span></li> <li><a href="#">5</a></li> <li><a href="#" rel="next">»</a></li> </ul> </div> </aside> </div> <div class="modal fade item_edit" id="item_edit"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a href="#" data-dismiss="modal" class="class pull-right"><span class="glyphicon glyphicon-remove"></span></a> <h3 class="modal-title">Cập nhật thông tin nhân viên </h3> </div> <div class="modal-body"> <div class="row"> <div class="col-md-4 item_img"> <img src="http://www.bvctch.vn/vnt_upload/about/thumbs/270_crop__Bsvoduylinh.jpg" class="img-responsive"> </div> <div class="col-md-8 item_content"> <form> <h4> <span>Mã nhân viên: NV0001</span> <!--span class="input-group-btn"> <button class="btn btn-danger btn-xs pull-right"; data-toggle="modal" data-target="#item_view"><i class="glyphicon glyphicon-remove" ></i></button> </span--> </h4> <div class="container" > <div class="row"> <div class="col-md-5" > <div class="panel"> <div class="panel-body"> <label>Chức vụ</label><input type='text' class='form-control' value=''> <label style="margin-top:15px;">Tinh trạng</label><input type='text' class='form-control' value='' > <label style="margin-top:15px;">Họ và tên</label><input type='text' class='form-control' value='' > <!--label style="margin-top:15px;">Giới tính</label><input type='text' class='form-control' value='' > <label style="margin-top:15px;">CMND/CCCD :</label><input type='text' class='form-control' value='' > <label style="margin-top:15px;">Số diện thoại</label><input type='text' class='form-control' value='' > <label style="margin-top:15px;">Địa chỉ</label><input type='text' class='form-control' value='' --> <label style="margin-top:15px;">Mô tả bản thân</label><textarea class="form-control " style="resize: vertical;" rows="2" id="comment"></textarea> <div class="text-center" style="margin-top:15px;"><button class="btn btn-primary btn-sx" type="button"><i class="glyphicon glyphicon-save" ></i> Save</button></div> </div> </div> </div> </div> </div> </form> </div> </div> </div> </div> </div> </div> <div class="modal fade item_add" id="item_add"> <div class="modal-dialog"> <div class="modal-content" style="width:800px; margin:0 auto;"> <div class="modal-header"> <a href="#" data-dismiss="modal" class="class pull-right"><span class="glyphicon glyphicon-remove"></span></a> <h3 class="modal-title">Thêm nhân viên </h3> </div> <div class="modal-body"> <div class="row"> <span class="container col-md-5 item_content"> <form> <div class="container" > <div class="row"> <div class="col-md-9" > <div class="panel"> <div class="panel-body"> <div class=" col-md-12"><label>Chức vụ</label><input type='text' class='form-control' value=''></div> <div class=" col-md-12"><label>Tinh trạng</label><input type='text' class='form-control' value='' > </div> <div class=" col-md-12"><label>Họ và tên</label><input type='text' class='form-control' value='' ></div> <div class=" col-md-12"><label>Giới tính</label><input type='text' class='form-control' value='' ></div> <div class=" col-md-12"><label>CMND/CCCD :</label><input type='text' class='form-control' value='' ></div> <div class=" col-md-12"><label>Số diện thoại</label><input type='text' class='form-control' value='' > </div> <div class=" col-md-12"><label>Địa chỉ</label><input type='text' class='form-control' value=''></div> <div class=" col-md-12"><label>Mô tả bản thân</label><textarea class="form-control " style="resize: vertical;" rows="2" id="comment"></textarea> </div> </div> </div> </div> </div> </div> </form> </span> </div> <div class="text-center" style="margin-top:15px;"><button class="btn btn-primary btn-sx" type="button"><i class="glyphicon glyphicon-plus" ></i> Add</button></div> </div> </div> </div> </div> <div class="modal fade item_view" id="item_view"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a href="#" data-dismiss="modal" class="class pull-right"><span class="glyphicon glyphicon-remove"></span></a> <h3 class="modal-title">Thông tin chi tiết nhân viên </h3> </div> <div class="modal-body"> <div class="row"> <div class="col-md-6 item_img"> <img src="http://www.bvctch.vn/vnt_upload/about/thumbs/270_crop__Bsvoduylinh.jpg" class="img-responsive"> </div> <div class="col-md-6 item_content"> <h4> <span>Mã nhân viên: NV0001</span> <!--span class="input-group-btn"> <button class="btn btn-danger btn-xs pull-right"; data-dismiss="modal" data-toggle="modal" data-target="#item_remove"><i class="glyphicon glyphicon-remove" ></i></button> <button class="btn btn-warning btn-xs pull-right"; data-dismiss="modal" data-toggle="modal" data-target= "#item_edit"><i class="glyphicon glyphicon-edit" ></i></button> </span--> </h4> <h5>Chức vụ: <span>Kế toán</span></h5> <p>Tình trạng: Làm việc</p> <p>Họ và tên: Tên Của Nhân Viên</p> <p>Bằng cấp: Đại học</p> <p>SĐT: 09111xxxxx</p> <p>Địa chỉ: 227 Nguyễn Văn Cừ - P.2 - Q.5 - Tp.HCM</p> <p>Mô tả bản thân.</p> </div> </div> </div>https://bootsnipp.com/user/snippets/nN5Pz# </div> </div> </div> <div class="modal fade item_remove" id="item_remove"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a href="#" data-dismiss="modal" class="class pull-right"><span class="glyphicon glyphicon-remove"></span></a> <h3 class="modal-title">Xác nhận</h3> </div> <div class="modal-body"> <p>Bạn có thật sự muốn xóa?</p> <div class="row"> <div class="col-12-xs text-center"> <button class="btn btn-success btn-md col-3-xs">Có</button> <button class="btn btn-danger btn-md col-3-xs">Không</button> </div> </div> </div> </div> </div> </div>

.item_view .modal-dialog{max-width: 800px; width: 100%;} .item_edit .modal-dialog{max-width: 800px; width: 100%;} .item_add .modal-dialog{max-width: 800px; width: 100%;} .item_remove .modal-dialog{max-width: 300px; width: 100%;} .pre-cost{text-decoration: line-through; color: #a5a5a5;} .space-ten{padding: 10px 0;} .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 #e5e8ef; border-radius: 4px 0 0 4px; width: 25%; } .mail-box .lg-side { background: none repeat scroll 0 0 #fff; border-radius: 0 4px 4px 0; width: 75%; } .mail-box .sm-side .user-head { background: none repeat scroll 0 0 #00a8b3; border-radius: 4px 0 0; color: #fff; min-height: 80px; padding: 10px; } .user-head .inbox-avatar { float: left; width: 65px; } .user-head .inbox-avatar img { border-radius: 4px; } .user-head .user-name { display: inline-block; margin: 0 0 0 10px; } .user-head .user-name h5 { font-size: 14px; font-weight: 300; margin-bottom: 0; margin-top: 15px; } .user-head .user-name h5 a { color: #fff; } .user-head .user-name span a { color: #87e2e7; font-size: 12px; } a.mail-dropdown { background: none repeat scroll 0 0 #80d3d9; border-radius: 2px; color: #01a7b3; font-size: 10px; margin-top: 20px; padding: 3px 5px; } .inbox-body { padding-top: 20px; } .btn-compose { background: none repeat scroll 0 0 #ff6c60; color: #fff; padding: 12px 0; text-align: center; width: 100%; } .btn-compose:hover { background: none repeat scroll 0 0 #f5675c; color: #fff; } ul.inbox-nav { display: inline-block; margin: 0; padding: 0; width: 100%; } .inbox-divider { border-bottom: 1px solid #d5d8df; } ul.inbox-nav li { display: inline-block; line-height: 45px; width: 100%; } ul.inbox-nav li a { color: #6a6a6a; display: inline-block; line-height: 45px; padding: 0 20px; width: 100%; } ul.inbox-nav li a:hover, ul.inbox-nav li.active a, ul.inbox-nav li a:focus { background: none repeat scroll 0 0 #d5d7de; color: #6a6a6a; } ul.inbox-nav li a i { color: #6a6a6a; font-size: 16px; padding-right: 10px; } ul.inbox-nav li a span.label { margin-top: 13px; } ul.labels-info li h4 { color: #5c5c5e; font-size: 13px; padding-left: 15px; padding-right: 15px; padding-top: 5px; text-transform: uppercase; } ul.labels-info li { margin: 0; } ul.labels-info li a { border-radius: 0; color: #6a6a6a; } ul.labels-info li a:hover, ul.labels-info li a:focus { background: none repeat scroll 0 0 #d5d7de; color: #6a6a6a; } ul.labels-info li a i { padding-right: 10px; } .nav.nav-pills.nav-stacked.labels-info p { color: #9d9f9e; font-size: 11px; margin-bottom: 0; padding: 0 22px; } .inbox-head { background: none repeat scroll 0 0 #41cac0; 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; } .inbox-head .sr-input { border: medium none; border-radius: 4px 0 0 4px; box-shadow: none; color: #8a8a8a; float: left; height: 40px; padding: 0 10px; } .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 .modal .modal-body input, .inbox-body .modal .modal-body textarea { border: 1px solid #e6e6e6; box-shadow: none; } .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; } .heading-inbox h4 { border-bottom: 1px solid #ddd; color: #444; font-size: 18px; margin-top: 20px; padding-bottom: 10px; } .sender-info { margin-bottom: 20px; } .sender-info img { height: 30px; width: 30px; } .sender-dropdown { background: none repeat scroll 0 0 #eaeaea; color: #777; font-size: 10px; padding: 0 3px; } .view-mail a { color: #ff6c60; } .attachment-mail { margin-top: 30px; } .attachment-mail ul { display: inline-block; margin-bottom: 30px; width: 100%; } .attachment-mail ul li { float: left; margin-bottom: 10px; margin-right: 10px; width: 150px; } .attachment-mail ul li img { width: 100%; } .attachment-mail ul li span { float: right; } .attachment-mail .file-name { float: left; } .attachment-mail .links { display: inline-block; width: 100%; } .fileinput-button { float: left; margin-right: 4px; overflow: hidden; position: relative; } .fileinput-button input { cursor: pointer; direction: ltr; font-size: 23px; margin: 0; opacity: 0; position: absolute; right: 0; top: 0; transform: translate(-300px, 0px) scale(4); } .fileupload-buttonbar .btn, .fileupload-buttonbar .toggle { margin-bottom: 5px; } .files .progress { width: 200px; } .fileupload-processing .fileupload-loading { display: block; } * html .fileinput-button { line-height: 24px; margin: 1px -3px 0 0; } * + html .fileinput-button { margin: 1px 0 0; padding: 2px 15px; } @media (max-width: 767px) { .files .btn span { display: none; } .files .preview * { width: 40px; } .files .name * { display: inline-block; width: 80px; word-wrap: break-word; } .files .progress { width: 20px; } .files .delete { width: 60px; } } ul { list-style-type: none; padding: 0px; margin: 0px; }

//<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#product_view"><i class="fa fa-search"></i> Quick View</button> function myFunction(x) { $("#item_view").modal(); }; $(document).ready(function() { var table = $('#example').DataTable( { responsive: true } ); new $.fn.dataTable.FixedHeader( table ); } );