backoffice/application/views/historique_transactions.php

<!-- DataTables -->
<link rel="stylesheet"
	  href="<?php echo base_url('bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css') ?>">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>

<div class="content-wrapper">

	<!-- Content Header (Page header) -->
	<section class="content-header">

		<h1>
			<?php echo $this->lang->line('Gestion des wallets') . ' '.$network.' - '.$country; ?>
<!--			<input type="button" class="btn btn-primary pull-right" id="Bactiver"-->
<!--				   value="Activer/Désactiver le(s) réseau(x)" />-->
		</h1>
		<?php
		$site_url = base_url();

		if ($alert == "ok") {

			if (!$success == "ok") {
				?>
				<div class='alert alert-danger alert-dismissible col-xs-6'>
					<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
					<h4><i class='icon fa fa-ban'></i> Erreur!</h4>
					<?php echo $message; ?>
				</div>

				<?php
			} else {
				?>
				<div class="alert alert-success alert-dismissible col-xs-6">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
					<h4><i class="icon fa fa-check"></i> Success!</h4>
					<?php echo $message; ?>
				</div>

				<?php
			}
		}
		?>
	</section>
	<section class="content">
		<div class="row">
			<div class="col-md-4 col-sm-6 col-xs-12">
				<div class="info-box">
					<!--                    <span id="change-periode" style="cursor: pointer;" class="info-box-icon bg-aqua"><i class="ion ion-android-arrow-right"></i></span>-->
					<span class="info-box-icon bg-aqua"><i class="ion ion-android-arrow-down"></i></span>
					<div class="info-box-content">
						<span class="info-box-text">Période </span>
						<span class="info-box-number">
                                    <input
										style="background: #fff; cursor: pointer; padding: 1px 1px; border: 1px solid #ccc; width: 100%"
										type="text" name="daterange"
										value="<?php echo ($startDate!=null & $endDate != null) ?  $startDate. ' - '.$endDate : ''?>"/>
                                    
						</span>
					</div>
				</div>
			</div>

		</div>
		<div class="row">
			<div class="col-xs-12">
				<div class="box">
					<div class="box-header">
						<h3 class="box-title">Historique des transactions</h3>
					</div>
					<div class="box-body">

						<?php
						$numrows = sizeof($transactions);
						$num = 0;
						if ($numrows > 0) {
						$fmt = new NumberFormatter( 'fr_FR', NumberFormatter::DECIMAL );
						?>

						<table id="transactions" class="table table-bordered table-striped">
							<thead>
							<tr>
								<th align='center'>ID</th>
								<th align='center'> Type</th>
								<th> Montant</th>
								<th>Commission de la banque</th>
								<th>Commission de l'hyperviseur</th>
								<th>Commission du superviseur</th>
								<th>Commission de l'agent</th>
								<th align='center'>Date</th>
							</tr>
							</thead>
							<tbody>

							<?php

							foreach ($transactions as $row) {
								$num++;
								echo "<tr>
										<td align='center' >$row->id</td>
										<td>".strtoupper($row->type_transac)."</td>
										<td>".$fmt->format($row->montant)."</td>
										<td>".$fmt->format( $row->commission_banque)."</td>
										<td>".$fmt->format( $row->commission_hyp)."</td>
										<td>".$fmt->format( $row->commission_sup)."</td>
										<td>".$fmt->format( $row->commission_ag)."</td>
										<td> $row->date_created</td>
										 </tr>";

							}
							?>
							</tbody>

							<?php
							} else {
								echo $this->lang->line('Aucune transaction');
							}

							?>

						</table>

					</div>
				</div>
			</div>
		</div>
	</section>


</div>
<!-- jQuery 3 -->
<script src="<?php echo base_url('bower_components/jquery/dist/jquery.min.js') ?>"></script>
<!-- Bootstrap 3.3.7 -->
<script src="<?php echo base_url('bower_components/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
<!-- DataTables -->
<script src="<?php echo base_url('bower_components/datatables.net/js/jquery.dataTables.min.js') ?>"></script>
<script src="<?php echo base_url('bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') ?>"></script>
<!-- SlimScroll -->
<script src="<?php echo base_url('bower_components/jquery-slimscroll/jquery.slimscroll.min.js') ?>"></script>
<!-- FastClick -->
<script src="<?php echo base_url('bower_components/fastclick/lib/fastclick.js') ?>"></script>
<!-- AdminLTE App -->
<script src="<?php echo base_url('dist/js/adminlte.min.js') ?>"></script>
<!-- AdminLTE for demo purposes -->
<script src="<?php echo base_url('dist/js/demo.js') ?>"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>


<script>
	$(function () {
		$('#transactions').DataTable();
	});
</script>

<script type="text/javascript">
	var startDate;
	var endDate;

	$(function () {
		$('input[name="daterange"]').daterangepicker({
			opens: 'left',
			autoUpdateInput: false,
			locale: {
				format: 'DD-MM-YYYY',
				cancelLabel: 'Clear'
			}
		}, function (start, end, label) {
			const debut = start.format('DD-MM-YYYY');
			const fin = end.format('DD-MM-YYYY');
			window.location = "<?php echo current_url()?>" + "?id=118&history=true" + "&d=" + debut + "&f=" + fin;

		});
	});

</script>