motorbike/app/Views/action_log/index.php

<meta charset="UTF-8">
<div class="content-wrapper">
  <section class="content-header">
    <h1>
      Historique des <small>Actions</small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="<?= base_url('/') ?>"><i class="fa fa-dashboard"></i> Accueil</a></li>
      <li class="active">Historique des Actions</li>
    </ol>
  </section>

  <section class="content">
    <div id="messages"></div>

    <!-- Filtres -->
    <div class="box box-default">
      <div class="box-header with-border">
        <h3 class="box-title"><i class="fa fa-filter"></i> Filtres</h3>
        <div class="box-tools pull-right">
          <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div>
      </div>
      <div class="box-body">
        <div class="row">
          <div class="col-md-2">
            <label>Date de debut</label>
            <input type="date" id="filterDateFrom" class="form-control" value="<?= date('Y-m-d') ?>">
          </div>
          <div class="col-md-2">
            <label>Date de fin</label>
            <input type="date" id="filterDateTo" class="form-control" value="<?= date('Y-m-d') ?>">
          </div>
          <div class="col-md-2">
            <label>Action</label>
            <select id="filterAction" class="form-control">
              <option value="">Toutes</option>
              <option value="CREATE">Creation</option>
              <option value="UPDATE">Modification</option>
              <option value="DELETE">Suppression</option>
              <option value="PAYMENT">Paiement</option>
              <option value="VALIDATE">Validation</option>
              <option value="REFUSE">Refus</option>
              <option value="DELIVERY">Livraison</option>
              <option value="ASSIGN_STORE">Assignation</option>
              <option value="ENTRER">Entree</option>
              <option value="SORTIE">Sortie</option>
              <option value="LOGIN">Connexion</option>
            </select>
          </div>
          <div class="col-md-2">
            <label>Magasin</label>
            <select id="filterStore" class="form-control">
              <option value="">Tous</option>
              <?php if (isset($stores) && is_array($stores)): ?>
                <?php foreach ($stores as $store): ?>
                  <option value="<?= $store['name'] ?>"><?= $store['name'] ?></option>
                <?php endforeach; ?>
              <?php endif; ?>
            </select>
          </div>
          <div class="col-md-2">
            <label>&nbsp;</label>
            <div>
              <button type="button" class="btn btn-primary btn-block" id="btnFilter">
                <i class="fa fa-search"></i> Filtrer
              </button>
            </div>
          </div>
          <div class="col-md-2">
            <label>&nbsp;</label>
            <div>
              <button type="button" class="btn btn-warning btn-block" id="btnReset">
                <i class="fa fa-refresh"></i> Reinitialiser
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Tableau -->
    <div class="box">
      <div class="box-header">
        <div class="pull-right">
          <button type="button" class="btn btn-success" id="btnExport">
            <i class="fa fa-download"></i> Exporter CSV
          </button>
        </div>
        <h3 class="box-title"><i class="fa fa-history"></i> Toutes les actions</h3>
      </div>
      <div class="box-body">
        <table id="actionLogTable" class="table table-bordered table-striped" style="width:100%">
          <thead>
            <tr>
              <th>Date</th>
              <th>Utilisateur</th>
              <th>Action</th>
              <th>Module</th>
              <th>Description</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </section>
</div>

<script>
$(document).ready(function() {
  $("#mainActionLogNav").addClass('active');

  $.extend(true, $.fn.dataTable.defaults, {
    language: {
      sProcessing: "Traitement en cours...",
      sSearch: "Rechercher&nbsp;:",
      sLengthMenu: "Afficher _MENU_ elements",
      sInfo: "Affichage de l'element _START_ a _END_ sur _TOTAL_ elements",
      sInfoEmpty: "Affichage de l'element 0 a 0 sur 0 element",
      sInfoFiltered: "(filtre de _MAX_ elements au total)",
      sLoadingRecords: "Chargement en cours...",
      sZeroRecords: "Aucun element a afficher",
      sEmptyTable: "Aucune donnee disponible",
      oPaginate: {
        sFirst: "Premier",
        sPrevious: "Precedent",
        sNext: "Suivant",
        sLast: "Dernier"
      }
    }
  });

  var base_url = '<?= base_url() ?>';

  function loadTable() {
    if ($.fn.DataTable.isDataTable('#actionLogTable')) {
      $('#actionLogTable').DataTable().destroy();
    }

    $('#actionLogTable').DataTable({
      ajax: {
        url: base_url + '/action-log/fetchData',
        type: 'GET',
        data: function(d) {
          d.date_from   = $('#filterDateFrom').val();
          d.date_to     = $('#filterDateTo').val();
          d.action      = $('#filterAction').val();
          d.store_name  = $('#filterStore').val();
        }
      },
      order: [[0, 'desc']],
      pageLength: 25
    });
  }

  loadTable();

  $('#btnFilter').on('click', function() {
    loadTable();
  });

  $('#btnReset').on('click', function() {
    $('#filterDateFrom').val('<?= date('Y-m-d') ?>');
    $('#filterDateTo').val('<?= date('Y-m-d') ?>');
    $('#filterAction').val('');
    $('#filterStore').val('');
    loadTable();
  });

  $('#btnExport').on('click', function() {
    var params = '?date_from=' + $('#filterDateFrom').val()
               + '&date_to=' + $('#filterDateTo').val()
               + '&action=' + $('#filterAction').val()
               + '&store_name=' + $('#filterStore').val();
    window.location.href = base_url + '/action-log/export' + params;
  });
});
</script>