File: /var/www/html/pmw24/app/application/views/customer/statement_report/list.php
<style>
tr.group{
background-color: #75ceda !important;
color: white;
font-weight: bold;
}
.download_excel_btn{
margin-left: 10px;
}
</style>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<!-- /row -->
<div class="row">
<div class="col-sm-12">
<div class="white-box">
<?php if($this->session->flashdata('cus_success_msg')){?>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<?=$this->session->flashdata('cus_success_msg')?>
</div>
<?php } ?>
<?php if($this->session->flashdata('cus_error_msg')){?>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<?=$this->session->flashdata('cus_error_msg')?>
</div>
<?php } ?>
<h3 class="box-title m-b-0">Statement Report</h3>
<div class="row" style="margin-bottom: 10px;">
<div class="col-md-3 col-sm-12">
<div class="form-group">
<label for="from_date" class="col-md-12">From Date</label>
<div class="col-md-12">
<input type="text" class="form-control form-control-line" id="from_date" name="from_date" value="" placeholder="From Date">
</div>
</div>
</div>
<div class="col-md-3 col-sm-12">
<div class="form-group">
<label for="to_date" class="col-md-12">To Date</label>
<div class="col-md-12">
<input type="text" class="form-control form-control-line" id="to_date" name="to_date" value="" placeholder="To Date">
</div>
</div>
</div>
<div class="col-md-3 col-sm-12">
<button type="button" id="search_btn" class="btn btn-success">Search</button>
</div>
</div>
<div class="row">
<div class="table-responsive">
<table id="service_table" class="statement-report display table">
<thead>
<tr>
<th>Sl. NO.</th>
<th>Car No</th>
<th>Invoice No</th>
<th>Due Date</th>
<th>Invoice Amount</th>
<th>Paid Amount</th>
<th>Paid On</th>
<th>Payment Mode</th>
<th>Balance</th>
</tr>
</thead>
<tbody></tbody>
<tfoot style="background-color: #f7cb53;">
<tr>
<th colspan="4">Total</th>
<th>Invoice Amount</th>
<th colspan="3">Paid Amount</th>
<th>Balance</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<script src="<?=base_url('public/customer_assets/plugins/bower_components/datatables/jquery.dataTables.min.js')?>"></script>
<!-- start - This is for export functionality only -->
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<!-- end - This is for export functionality only -->
<script>
// var groupColumn = 1;
// var groupShowColumn = 2;
// var column_index =[1,2];
$(document).ready(function() {
$('#from_date').datepicker({
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#to_date').datepicker('setStartDate', minDate);
});
$('#to_date').datepicker({
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true
}).on('changeDate', function (selected) {
var maxDate = new Date(selected.date.valueOf());
$('#from_date').datepicker('setEndDate', maxDate);
});
var now = new Date();
var date = now.getFullYear() + ":" + now.getMonth() + ":" + now.getDate();
var total_due_amt = 0 ;
var total_paid_amt = 0 ;
var total_invoice_amt = 0 ;
table = $('#service_table').DataTable({
"processing": true, //Feature control the processing indicator.
"serverSide": true, //Feature control DataTables' server-side processing mode.
"order": [],
// Load data for the table's content from an Ajax source
"ajax": {
"url": "<?php echo site_url('customer/statement_report/all_content_list')?>",
"type": "POST",
"data":function(args){
args.from_date = $('#from_date').val(),
args.to_date = $('#to_date').val()
},
"dataSrc": function ( data ) {
total_due_amt = data.total_due_amt;
total_paid_amt = data.total_paid_amt;
total_invoice_amt = data.total_invoice_amt;
return data.data;
}
},
"responsive": true,
//Set column definition initialisation properties.
"columnDefs": [{
"orderable": false,
"targets": ['no-sort'],
}],
"drawCallback": function( settings ) {
var api = this.api();
$(api.column(4).footer()).html(total_invoice_amt);
$(api.column(5).footer()).html(total_paid_amt);
$(api.column(8).footer()).html(parseFloat(total_due_amt).toFixed(2));
},
dom: 'lBfrtip',
buttons: [{
extend: 'excel',
text: 'Download Excel',
className: 'download_excel_btn',
filename: 'customer_statement_' + date
}
//'copy', 'csv', 'excel', 'pdf', 'print'
],
"lengthMenu": [[5, 25, 50, 100, -1], [5, 25, 50, 100, "All"]]
});
$('.dataTables_filter input').off().on('keyup', function() {
$('#service_table').DataTable().search(this.value.trim(), true, false).draw();
});
});
$(document).on('click','#search_btn',function(){
table.draw();
$('#to_date').datepicker('setStartDate', new Date());
$('#from_date').datepicker('setEndDate', new Date());
})
</script>