siddharth_application/application/views/Report_year_wise_total.php

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css">
      <style> 
          .dataTables_filter input {padding: 4px;}
         .dataTables_filter {
                            width: 50%;
                            float: right;
                            text-align: right;
                            }
			   .dataTables_paginate {
                            width: 50%;
                            float: right;
                            text-align: right;
                           }
		    div.dt-buttons {
                            position: relative;
                            float: right;

                           }
			 .btn-success {
								background-color: #3c8dbc;
								border-color: #3c8dbc;
							}			   
		 
			   
	 </style>
	  <div class="content-wrapper">
	 <section class="content">
 <div class="row" style="min-height: 600px;">
        <!-- Left col -->
        <div class="col-md-12">
        <!-- TABLE: LATEST ORDERS -->
          <div class="box box-info">
            <div class="box-header with-border">
              <center><h3 class="box-title"><p style="color:#3c8dbc"><b>Report - Year-wise-Total(<?php echo $year; ?>)</b></p></h3></center>
			</div>
			<!-- /.box-header -->
			<div class="box-body">
              <div>
                <table class="table table-bordered table-hover" id="cc" style="font-size:14px;">
                   <thead>
                     <tr>
				       <th style="text-align:center">Supplier Name</th>
                       <th style="text-align:center">Material Name</th>
					   <th style="text-align:center">Quantity</th>
					   <th style="text-align:center">Total Value &nbsp;(&#8377;)</th>s
					   
					 
                      </tr>
                    </thead>
				    <tbody>
				       <?php if(!empty($ytotal)){
					  $tr3=0;
					  $tr4=0; 
					  $last = $this->uri->total_segments();
		               $ab=$this->uri->segment($last);
					   foreach($ytotal as $rel)
					    {				
					   ?> 
					  <tr>
                        <td><span>
						<a href="<?= base_url() ?>report/link_purchase?sid=<?php echo $rel->sid;?>&mid=<?php echo $rel->mid;?>&ab=<?php echo $ab;?>"><?php echo $rel->supplier_name;?></a>
						</span></td>
						<td><span><?php echo $rel->material_name;?></span></td>
						<td style="text-align:right"><span><?php 
						 $tr3= $tr3 + round($rel->quantity);
						echo round($rel->quantity);?></span></td>
						<td style="text-align:right"><span><?php 
						 $tr4= $tr4 + number_format($rel->total,2,'.','');
						echo number_format($rel->total,2,'.','');?></span></td>
						</tr>
			           <?php
					    }
						
					  ?>
			        </tbody>
					<tfoot  width="100%">
					 <tr>
						    <td style="text-align:center;">
							<strong><?php echo 'Total'; ?></strong>
							</td>
						    <td style="text-align:center;">
							<?php echo ''; ?>
							</td>
									
								<td style="text-align:right">
								<strong>
								<?php 
								 {
								 echo round($tr3);
								
								  } 
								 ?> 
                                </strong>								 
								</td>
									<td style="text-align:right">
									<strong>
									<?php 
									 {
									 echo number_format($tr4,2,'.','');
									
									  } 
									 ?>  
									</strong>
									</td>
										
											
												
						</tr>
					 </tfoot>
					  <?php
					    }
						
					  ?>
			      </table>
			 
				</div>
			   </div>
			</div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
	  </div>
					</section>
					</div>


	<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
	<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
	<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.colVis.min.js"></script>

<script> 
	

// Bootstrap datepicker
// Set up your table
$(document).ready(function() {
    table = $('#cc').DataTable( {
		"language": {
        "emptyTable":     "<center> Data Not Found ! </center>"
        },
        "dom": "<'row'<'col-md-6'l><'col-md-6'Bf>>" +
"<'row'<'col-md-6'><'col-md-6'>>" +
"<'row'<'col-md-12't>><'row'<'col-md-4'i><'col-md-8'p>>",
       buttons: [
            
            {
                extend: 'excelHtml5',
				footer: 'true',
				//messageTop: $('h3').text(),
				title: $('h3').text(),
                exportOptions: {
                    columns: ':visible'
					
                }
            },
            
            'colvis'
        ],
		"footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
 
            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                 return typeof i === 'string' ?
				 parseFloat(i.replace(/[^0.00-9.00]+/g,"")*1) :
                     typeof i === 'number' ?
					 parseFloat(i) : 0;
            };

			TotalQTY = api
                 .column( 2, { search:'applied' } )
                 .data()
                 .reduce( function (a, b) {
                     return intVal(a) + intVal(b);
                 }, 0 );

             $( api.column( 2 ).footer() ).html( TotalQTY.toFixed().bold() );
			 
			TotalVALUE = api
                 .column( 3, { search:'applied' } )
                 .data()
                 .reduce( function (a, b) {
                     return intVal(a) + intVal(b);
                 }, 0 );
		
             $( api.column( 3 ).footer() ).html(  TotalVALUE.toFixed(2).bold() );

        }
    } );
} );
 $('#mySelect').on('change',function(){
       
		 table
        .column(4)
        .search(this.value)
        .draw();
    });
	
	$( function() {
		//var dateFormat = "mm/dd/yy",
			from = $( "#min-date" )
				.datepicker({
					dateFormat: "dd-mm-yy", 
					defaultDate: "+0d",
					changeMonth: true,
					//numberOfMonths: 1
					
				})
				.on( "change", function() {
					to.datepicker("option", "minDate", getDate( this ) );
				}),
			to = $( "#max-date" ).datepicker({
				dateFormat: "dd-mm-yy", 
				defaultDate: "+0d",
				changeMonth: true,
				//numberOfMonths: 1
				
			})
			.on( "change", function() {
				from.datepicker( "option", "maxDate", getDate( this ) );
			});

		function getDate( element ) {
			var date;
			 
			try {
				date = $.datepicker.parseDate( dateFormat, element.value );
				 
			} catch( error ) {
				date = null;
			}

			return date;
		}
	} );

   function Reset()
{
	 $('#mySelect').val('');
	
}

	</script>