ria/app/Views/Report_month_wise_inward.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: #00d976;
		;
		border-color: #00d976;
		;
	}
</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:  #00d976;"><b>Report - Month-wise-Inward(<?php echo $mont; ?>)</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>


									</tr>
								</thead>
								<tbody>
									<?php if (!empty($month)) {
										$tr3 = 0;
										$tr4 = 0;
										$ab = $this->input->get('ab');
										$last = $this->input->get('dat');
										$new = date("F", strtotime($last)) . "\n";
										foreach ($month as $rel) {
									?>
											<tr>
												<td><span>
														<a href="<?= base_url() ?>report/ilink_purchase?sid=<?php echo $rel->sid; ?>&mid=<?php echo $rel->mid; ?>&ab=<?php echo $ab; ?>&m=<?php echo $new; ?>"><?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>