EVOLUTION-NINJA
Edit File: subscription-payment.php
<?php echo view('includes/admin-header', $user_management, $org); $role_id = session()->get('role_id'); ?> <div class="col-sm-10" style="padding:3%;"> <div class="row" id="mobile-div"> <div class="col-sm-4"> <h4 class="user-tag">Subscription Payment List</h4> </div> <div class="col-sm-4"> </div> <div class="col-sm-4"> <button type="button" id="btnExport" class="btn-excel" onclick="usermanagement_excel()">Export to Excel</button> <!-- The Modal --> <!---------------------Modal-end-----------------> </div> </div> <div class="row"> <div class="col-sm-8"></div> <div class="col-sm-4"> <a href="<?php echo base_url('user-management');?>"><button type="button" class="btn-excel mt-4 ">Back</button></a> </div> </div> <div id="jaytablist33" style="margin-top:6%;" > <div class="grid_div"></div> <div id="list2" > <!-- <div class="mb-4 strtser"> <label for="start_date"><b>Start Date:</b></label> <input type="text" id="start_date" name="start_date"> <label for="end_date" class="ml-5"><b>End Date:</b></label> <input type="text" id="end_date" name="end_date"> <button id="apply_filters" class="apply_filter ml-3" >Search</button> </div> --> <table id="list3" > </table> <div style="display:none;"> <table border="1" style="border-spacing: 0px !important;" id="user_excel" class="user_excel"></table> </div> </div> <div id="pager3"></div> </div> </div> </div><!--col-10--> <div class="modal fade editDisease" > <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header" style="background-color:#439bc1;padding:10px;"> <h2 class="modal-title" id="exampleModalLabel" style="color:white;font-size:18px;font-weight: 600;">Role</h2> <button type="button" class="close" id="clos" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> </div> </div> </div> <script type="text/ecmascript" src="<?php echo base_url('public/jqgrid/js/jquery.jqGrid.min.js'); ?>"></script> <!-- This is the localization file of the grid controlling messages, labels, etc.--> <!-- We support more than 40 localizations --> <script type="text/ecmascript" src="<?php echo base_url('public/jqgrid/js/i18n/grid.locale-en.js'); ?>"></script> <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom --> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/assets/css/jquery-ui.css'); ?>" /> <!-- The link to the CSS that the grid needs --> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/jqgrid/css/ui.jqgrid.css'); ?>" /> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/jqgrid/css/ui.jqgrid-bootstrap.css'); ?>" /> <script src="<?php echo base_url('public/assets/js/jquery-ui.js'); ?>" type="text/javascript"></script> <script type="text/ecmascript" src="<?php echo base_url('public/jqgrid/js/jquery.table2excel.js'); ?>"></script> <script src="<?php echo base_url('public/assets/js/jquery.table2excel.js');?>"></script> <script> $(document).ready(function() { // Initialize JQGrid $("#list3").jqGrid({ url: '<?php echo base_url('sub-pay'); ?>', datatype: 'json', colNames:['First Name','Last Name','Payment Id','Amount','Email', 'Gamer_Id','Phone No', 'Paid Date', 'Subscription_Till'], colModel:[ {name:'f_name',index:'f_name', width:140, editable:false }, {name:'l_name',index:'l_name', width:140, editable:false }, {name:'pay_id',index:'pay_id', width:130, editable:false}, {name:'amount',index:'amount',width:150, editable:false}, {name:'email',index:'email', width:120, editable:false }, {name:'gamer_id',index:'gamer_id', width:120, editable:false }, {name:'mobile',index:'mobile', width:120, editable:false }, { name: 'paid_date', index: 'paid_date', width: 140, editable: false, formatter: 'date', formatoptions: { srcformat: 'Y-m-d', newformat: 'Y-m-d' } }, { name: 'suscription_till', index: 'suscription_till', width: 140, editable: false, formatter: 'date', formatoptions: { srcformat: 'Y-m-d', newformat: 'Y-m-d' } }, ], pager: '#pager3', rowNum: 20, rownumbers: true, rowList:[20,30,50,100,200,300], viewrecords: true, gridview: true, height: 'auto', loadonce:true, autowidth: true, caption: 'Subscription Payment List' }); $("#list3").jqGrid("setLabel", "rn", "SL"); $("#list3").jqGrid('filterToolbar',{stringResult: true,searchOperators : true}); $("#list3").jqGrid('navGrid','#pager3', {edit:false,add:false,del:false,search:true,refresh:true}, { }, { }, { }, { sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'], closeOnEscape: true, multipleSearch: true, closeAfterSearch: true } ); $("#start_date, #end_date").datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, }); $("#apply_filters").click(function() { var startDate = $("#start_date").val(); var endDate = $("#end_date").val(); $("#list3").jqGrid('setGridParam', { postData: { start_date: startDate, end_date: endDate }, page: 1 }).trigger('reloadGrid'); }); }); function fun_excel() { $.ajax({ url: "<?php echo site_url('sub-pay');?>", type: "GET", data: { start_date: $("#start_date").val(), end_date: $("#end_date").val() }, success: function (response) { console.log(response); $('.user_excel').empty(); var con = ''; con += '<thead><tr>o9<th>First Name</th><th>Last Name</th><th>Payment Id</th><th>Amount</th><th>Email</th><th>Gamer_Id</th><th>Phone No</th><th>Paid Date</th><th>Suscription Till</th></tr></thead>'; $.each(response, function (key, value) { con += '<tr>'; con += '<td>' + value.f_name + '</td>'; con += '<td>' + value.l_name + '</td>'; con += '<td>' + value.pay_id + '</td>'; con += '<td>' + value.amount + '</td>'; con += '<td>' + value.email + '</td>'; con += '<td>' + value.gamer_id + '</td>'; con += '<td>' + value.mobile + '</td>'; con += '<td>' + value.paid_date + '</td>'; con += '<td>' + value.suscription_till + '</td>'; con += '</tr>'; }); $('.user_excel').append(con); } }); } fun_excel(); $("#apply_filters").click(function () { fun_excel(); }); </script> <script type="text/javascript"> function usermanagement_excel(){ $(".user_excel").table2excel({ exclude: ".noExl", name: "Excel Document Name", filename: "Subscription Payment List", fileext: ".xls", exclude_img: true, exclude_links: true, exclude_inputs: true }); } </script> <style> .ui-jqgrid-sdiv{ display : none !important; } .ui-jqgrid{ z-index: 0 !important; } .ui-jqgrid-titlebar { background-color:#0065A3; } .ui-jqgrid-title{ color:#fff; font-weight: 600; font-size: 18px; } .user-tag{ color: #0065A3; font-weight: 600; font-size: 24px; } .soptclass{ display : none; } .apply_filter{ background-color: #0065A3; cursor: pointer; color: #fff; border: 0; padding: 5px 12px; border-radius: 8px; /* float: right; */ } @media only screen and (max-width:600px){ #mobile-div{ padding: 20px; } } </style> <?php echo view('includes/admin-footer'); ?>