ria/app/Views/Report_smryPackingMaterialReport.php

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css">
<style>
	table {
		width: auto;
	}

	.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; */

	}
</style>

<div class="content-page">
	<div class="content">
		<!-- Start Content-->
		<div class="container-fluid">
			<!-- start page title -->
			<div>
				<div class="row">
					<div class="col-12">
						<div class="page-title-box page-title-box-alt">
							<div class="page-title-right">
								<ol class="breadcrumb m-0">
									<li class="breadcrumb-item"><a href="javascript: void(0);">Reports</a></li>
									<li class="breadcrumb-item"><a href="javascript: void(0);">Stock Summary</a></li>
									<li class="breadcrumb-item active">
										<h4 class="page-title"><b> Packing Material(Bags) Report - Monthly </b></h4>
									</li>
								</ol>
							</div>

						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-12">
						<div class="card">
							<div class="card-body">

								<form method="post" action="<?php echo base_url('smryPackingMaterialReport'); ?>">

									<div class="row form-group has-feedback">

										<div class="col-md-3">
												<label for="financialyear">
													 Year
												</label>
												<div class="input-group">
													<select class="form-control" id="financialyear" name="financialyear" required>
														<option value="">Select Year</option>
														<?php

														foreach ($finyear as $fy): {; ?>

																<option
																	<?php echo (isset($givenYear) && $fy == $givenYear) ? "selected" : ""; ?>

																	value="<?php echo $fy; ?>">

																	<?php echo $fy;  ?>

																</option>


														<?php }
														endforeach; ?>

													</select>
												</div>
										</div>

										<div class="col-md-3">
											<label for="month">
												<?php echo 'Month'; ?>
											</label>
											<div class="input-group">
												<select class="form-control select2" id="month" name="month"  required>

													<?php $monthArray = [
														'January',
														"February",
														"March",
														"April",
														"May",
														"June",
														"July",
														"August",
														"September",
														"October",
														"November",
														"December"
													] ?>

													<option value="">Select Month</option>
													<?php foreach ($monthArray as $month): ?>
														<option value="<?= $month ?>" <?php if (isset($givenMonth) && $givenMonth == $month) {
																						echo 'selected';
																					} ?>>
															<?= $month ?>
														</option>
													<?php endforeach ?>

												</select>
											</div>
										</div>

										<div class="col-md-6 text-right"><br>
											<input type="button" class="btn btn-danger m-2" value="Reset" onclick="window.location.href='<?= base_url('smryPackingMaterialReport') ?>';">
											<input type="submit" class="btn btn-success" name="btn_submit"
												value="View Report">
										</div>

									</div>


								</form>


								

								<table id="cc" class="table table-bordered table-hover wrap" style="background-color:#fff;width: 100% !important;">

									<!-- <table class="table table-bordered table-hover" id="asset_list_table" style="background-color:#fff;font-size:12px;"> -->
									<thead>
										<tr>
											<th>SupplierName</th>
											<th>MaterialName</th>
											<th>Customer</th>
											<th>Opening Qty(No's)</th>
											<th>Purchase Qty(No's)</th>
											<th>Total Qty(No's)</th>
											<th>Used Qty(No's)</th>
											<th>Closing Qty(No's)</th>
										</tr>
									</thead>
									<tbody>
										<?php if(!empty($smryPackingMaterialReport)){ 
											foreach($smryPackingMaterialReport as $report) {?>
											<tr>
												<td><?= $report['supplierName'] ?></td>
												<td><?= $report['MaterialName'] ?></td>
												<td><?= $report['customer'] ?></td>
												<td><?= $report['opening'] ?></td>
												<td><?= $report['purchase'] ?></td>
												<td><?= $report['total'] ?></td>
												<td><?= $report['used'] ?></td>
												<td><?= $report['closing'] ?></td>
											</tr>
										<?php }
										} ?>
									</tbody>
									<tfoot width="100%">

									</tfoot>
								</table>
							</div> <!-- end card body-->
						</div> <!-- end card -->
					</div><!-- end col-->
				</div>
			</div>
		</div> <!-- container -->
	</div> <!-- content -->
</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 src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/datetime-moment.js"></script>
<script>
	// Bootstrap datepicker
	// Set up your table
	$(document).ready(function() {
		// Initialize the DataTable with only pagination enabled
		var table = $('#cc').DataTable({
			dom: 'Blfrtip',
            buttons: [
                {
					extend: 'excel',
					text: 'Excel',
				}
            ],
			paging: true, // Enable pagination
			searching: true, // Disable search
			ordering: false, // Disable column sorting
			info: false, // Disable table information
			lengthChange: false, // Disable page length options
			pageLength: 10, // Default rows per page
			responsive: true, // Keep responsive design
			language: {
				paginate: {
					next: '<i class="fas fa-angle-right"></i>', // Next button icon
					previous: '<i class="fas fa-angle-left"></i>' // Previous button icon
				}
			}
		});
	});





</script>