EVOLUTION-NINJA
Edit File: employee_list.php
<?php $this->load->view('includes/header.php')?> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('assets/css/grid_style.css'); ?>" /> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('assets/css/jquery-ui.css'); ?>" /> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('assets/jqgrid/css/ui.jqgrid.css'); ?>" /> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('assets/jqgrid/css/ui.jqgrid-bootstrap.css'); ?>" /> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('assets/jqgrid/css/ui.jqgrid-bootstrap-ui.css'); ?>" /> <script type="text/ecmascript" src="<?php echo base_url('assets/jqgrid/js/jquery.jqGrid.min.js'); ?>"></script> <script type="text/ecmascript" src="<?php echo base_url('assets/jqgrid/js/i18n/grid.locale-en.js'); ?>"></script> <script src="<?php echo base_url('assets/js/jquery-ui.js'); ?>" type="text/javascript"></script> <div class="content-wrapper"> <div class="content-header"> <div class="container-fluid"> <div class="row mb-2"> <div class="col-sm-6"> </div> <div class="col-sm-6"> <ol class="breadcrumb float-sm-right"> <li class="breadcrumb-item"><a href="#">HR</a></li> <li class="breadcrumb-item"> Employee List </li> </ol> </div> </div> </div> </div> <div class="row"> <div class="col-md-12 grid-margin stretch-card"> <div class="card"> <div class="card-body"> <div id ="jaytab" style="margin-top:3%" class="grid table-responsive"> <table id="list2"></table> <div id="pager2"></div> <div id="dialogSelectRow" title="Warning" style="display:none"> <p>Please select row</p> </div> </div> </div> </div> </div> </div> </div> <style type="text/css"> .fa-user{ color: #F1536E; } pre { background-color: transparent; border: 1px solid transparent; line-height: 1.6; text-align: justify; } #pager2_left { display: none !important; } #pager2_center { padding-left: 350px !important; } .form-control:focus, input[type="Submit"]:focus, input[type="button"]:focus { border-color: #FF0000; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6); } #FrmGrid_list2 { width: 100% !important; } .ui-jqdialog .ui-jqdialog-titlebar { height: 29px !important; background-color: #001a00; color: white; padding-left: 10px; } .fm-button { height: 21px !important; padding: 1px; margin-right: 10px !important; height: 21px !important; width: 43%; margin-top: -7px !important; } .ui-jqdialog-content td.navButton { padding-top: 12px !important; } .ui-jqgrid .ui-jqgrid-titlebar { height: 27px !important; /*background:#1e7ad7 !important;*/ color:white !important; } .ui-jqgrid-bdiv { height: auto !important; } .ui-widget-overlay { z-index:0 !important; } .ui-widget-header { /*background: #1e7ad7 !important;*/ } .ui-jqgrid-hdiv ui-state-default { //width: 873px !important; cursor: default!important } ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #fed22f; background: #ffe45c; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { font-weight: bold; color: black; } .ui-jqgrid .ui-jqgrid-bdiv { //overflow-y: scroll; //overflow-x: scroll ; //width: 100% !important; } .ui-jqgrid-htable{ //width: 100% !important; } #list2{ //width: 100% !important; } .ui-jqgrid-hdiv { //width: 100% !important; } @media only screen and (min-width:320px) and (max-width:640px) { #jaytab { width: 1100px !important; overflow-x: scroll !important; } .ui-jqgrid ui-widget ui-widget-content ui-corner-all { //width: 900px !important; } .ui-jqgrid-view { //width: 900px !important; } .ui-jqgrid-hdiv { //width: 900px !important; } .ui-jqgrid-htable { width: 900px !important; } .ui-jqgrid-bdiv { width: 900px !important; } #list2 { width: 900px !important; } #pager2 { width: 900px !important; } .subgrid-data { width: 1100px !important; overflow-x: scroll !important; } .table-responsive { border: transparent; } .ui-jqgrid { background-color: #ecf0f5; border: 1px solid #ecf0f5 !important; border-radius: 0px !important; } #myTable { overflow-x: scroll; width: 1200px; } } @media only screen and (min-width:641px) and (max-width:991px) { #jaytab { width: 1100px !important; overflow-x: scroll !important; } .ui-jqgrid ui-widget ui-widget-content ui-corner-all { //width: 900px !important; } .ui-jqgrid-view { width: 900px !important; } .ui-jqgrid-hdiv { width: 900px !important; } .ui-jqgrid-htable { width: 900px !important; } .ui-jqgrid-bdiv { width: 900px !important; } #list2 { width: 900px !important; } #pager2 { width: 900px !important; } .subgrid-data { width: 1100px !important; overflow-x: scroll !important; } .table-responsive { border: transparent; } .ui-jqgrid { background-color: #ecf0f5; border: 1px solid #ecf0f5 !important; border-radius: 0px !important; } } .table-bordered>thead>tr>th, .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th { border: 1px solid #555; } .table>thead:first-child>tr:first-child>th { border-top: 1px solid #555; } table.table-bordered th:last-child, table.table-bordered td:last-child { border-right: 1px solid #555; } .salary{ border: none; background:none; } .contract{ color: #2AA2DF; border: none; background:none; } .offer{ color: green; border: none; background:none; } .experience{ color: #E0572A; border: none; background:none; } @media only screen and (max-width: 640px) and (min-width: 320px){ #jaytab { width: 280px !important; overflow-x: scroll !important; } } @media only screen and (max-width: 991px) and (min-width: 641px){ #jaytab { width: 680px !important; overflow-x: scroll !important; } } .salary{ border: none; background:none; display: block; margin: auto; } .contract{ color: #2AA2DF; border: none; background:none; padding-left: 17px; } </style> <script type="text/javascript"> CallGrid(); function CallGrid() { jQuery("#list2").jqGrid({ url:"<?php echo site_url('get-employee-list')?>", mtype : "get", datatype: "json", colNames:['id','Employee <br>ID','Name','Department','Layout','Phone','Email','Employee <br>Type','Profile <br> Pic','Agreement','Salary <br>Slip','Contract <br> Letter','Offer <br> Letter','Experience <br> Letter','Action'], colModel:[ {name:'emp_id',index:'emp_id', width:40, hidden:true,editable:false}, {name:'employee_id',index:'employee_id', width:80, hidden:false,editable:false}, {name:'full_name',index:'first_name', width:130, hidden:false,editable:false}, {name:'dept_name',index:'dept_name',editable:false, width:130}, {name:'layout_name',index:'layout_name',editable:false, width:180}, {name:'phone',index:'phone', width:90, hidden:false,editable:false}, {name:'email_id',index:'email_id', width:220, hidden:false,editable:false}, {name:'employee_type',index:'employee_type',width:80,hidden:false,editable:false}, {name:'profile',index:'profile',align:'center',width:50,editable:false,formatter: function (cellvalue, options, rowObject) { var retVal = ""; if(rowObject.profile != "") { var retVal = '<a href="<?php echo base_url('employee_uploads');?>/'+rowObject.profile+'" target="_blank"><i class="fa fa-user" aria-hidden="true"></i></a> '; } else { var retVal = '<a href="<?php echo base_url('employee_uploads/no_images.jpg');?>" target="_blank"><i class="fa fa-user" aria-hidden="true"></i></a> '; } return retVal; }}, {name:'agreement',index:'agreement', width:80, hidden:false,editable:false}, {name:'',index:'', width:50, hidden:false,editable:false,formatter: function (cellvalue, options, rowObject) { var retVal = ""; if(rowObject.employee_type == 'Permanent') { var retVal = '<button class="salary"><a href="javascript:void(0);" onclick="fun_pay_slip('+rowObject.emp_id+');"><i class="fa fa-file-text-o fa-lg" aria-hidden="true"></i></a></button>'; } else { var retVal = ""; } return retVal; }}, {name:'',index:'', width:60, hidden:false,editable:false,formatter: function (cellvalue, options, rowObject) { var retVal = " <button type='button' class='contract' onclick='contract_order("+rowObject.emp_id+")'><center><i class='fa fa-file-text-o fa-lg' aria-hidden='true'></i></center></button>" return retVal; // var retVal ='<a target="_blank" href="<?php echo base_url('assets/images/contractletter.png');?>"><button>View</button></a>'; return retVal; }}, {name:'offer_letter_status',index:'offer_letter_status',width:50,align:"center",search:false,editable:false,formatter: function (cellvalue, options, rowObject) { var retVal=""; if(rowObject.offer_letter_status == 'GENERATE') { var retVal = "<button type='button' class='offer' onclick='offer_letter_status("+rowObject.emp_id+")'><i class='fa fa-file-text-o fa-lg' aria-hidden='true'></i></button>" } else { var retVal = "GENERATED"; } return retVal; }}, {name:'experience_status',index:'experience_status',width:80,align:"center",search:false,editable:false,formatter: function (cellvalue, options, rowObject) { var retVal = ""; if(rowObject.experience_status == 'GENERATE') { var retVal = "<button type='button' class='experience' onclick='experience_letter("+rowObject.emp_id+")'><i class='fa fa-file-text-o fa-lg' aria-hidden='true'></i></button>" } else { var retVal = "GENERATED"; } return retVal; }}, {name:'',index:'',width:50,align:"center",search:false,editable:false,formatter: function (cellvalue, options, rowObject) { var retVal = ""; var retVal = '<b><a href="javascript:void(0);" onclick="fun_edit('+rowObject.emp_id+');"><i class="fa fa-pencil-square-o" style="color:blue;" aria-hidden="true"></i></a> <a onclick="delete_employee('+rowObject.emp_id+')"; href="javascript:void(0);"><i class="fa fa-trash" style="color:red;" aria-hidden="true"></i></a></b>'; return retVal; }}, ], rowNum:20, rowTotal: 2000, rowList : [20,30,60,120,240,500], rownumbers: true, //rownumWidth: 60, pager:"#pager2", sortname:'id', viewrecords: true, gridview: true, // autowidth: true, sortorder:"asc", shrinkToFit: true, loadonce:true, autoencode: true, caption:"Employee List", //Subgrid1... subGrid: false, }); $("#list2").jqGrid("setLabel", "rn", "SL"); $("#list2").jqGrid('filterToolbar',{searchOperators : false}); //for multisearch code,remove if not required $("#list2").jqGrid('navGrid','#pager2', {edit:false,add:false,del:false,search:false,refreshstate:"current"}, { }, { }, { }, { sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'], closeOnEscape: true, multipleSearch: true, closeAfterSearch: true, closeAfterDelete:true, closeAfterEdit:true }, ); } function fun_pay_slip(id) { window.location.href = '<?php echo site_url('employee-pay-slip');?>/'+id; } function contract_order(rowid) { var id=rowid; //window.location.href = "'<?php echo site_url('contract-order');?>/'+id" window.open( '<?php echo site_url('contract-order');?>/'+id, '_blank' // <- This is what makes it open in a new window. ); } function experience_letter(rowid) { var id=rowid; window.open( '<?php echo site_url('experience-letter');?>/'+id, '_blank' // <- This is what makes it open in a new window. ); } function offer_letter_status(rowid) { var id=rowid; window.open( '<?php echo site_url('permanent-offerletter');?>/'+id, '_blank' // <- This is what makes it open in a new window. ); } function fun_edit(rowId) { var id = rowId; window.location.href = '<?php echo site_url('edit-employee');?>/'+id; } function delete_employee(id) { swal({ title: "Are you sure of deleting?", text: "You will not be able to recover this employee data!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!", cancelButtonText: "No, cancel plz!", closeOnConfirm: false, closeOnCancel: false }, function(isConfirm){ if (isConfirm) { $(".sweet-alert").hide(); $(".sweet-overlay").hide(); $.ajax({ type : 'post', url : "<?php echo site_url('delete-employee');?>", data : {'emp_id':id}, success:function(response) { response=jQuery.parseJSON(response); console.log(response); if(response.result==1){ toastr["success"](response.message); $("#list2").setGridParam({datatype:'json', page:1}).trigger('reloadGrid'); } } }); } else { $(".sweet-alert").hide(); $(".sweet-overlay").hide(); } }); } </script> <?php $this->load->view('includes/footer.php')?>