motorbike/app/Views/securite/index.php

<!-- application/Views/securite/index.php -->
<div class="content-wrapper">
  <!-- Content Header -->
  <section class="content-header">
    <h1>Validation de sortie <small>de matériel</small></h1>
    <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> Accueil</a></li>
      <li class="active">Validation des matériels</li>
    </ol>
  </section>

  <!-- Main content -->
  <section class="content">
    <div id="messages"></div>

    <?php if (session()->getFlashdata('success')): ?>
      <div class="alert alert-success"><?= session()->getFlashdata('success') ?></div>
    <?php elseif (session()->getFlashdata('error')): ?>
      <div class="alert alert-danger"><?= session()->getFlashdata('error') ?></div>
    <?php endif; ?>

    <div class="box">
      <div class="box-header"><h3 class="box-title">Espace validation de sortie de vente</h3></div>
      <div class="box-body">
        <table id="manageTable" class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>Image</th>
              <th>UGS</th>
              <th>Désignation</th>
              <th>Statut</th>
              <th>Action</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </section>
</div>

<!-- Modal -->
<div class="modal fade" id="editModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="updateForm" action="<?= base_url('validateSecurite/update') ?>" method="post">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Valider la sortie de la moto</h4>
        </div>
        <div class="modal-body row">
          <div class="col-sm-4 text-center">
            <img id="motoImage" class="img-responsive img-thumbnail" src="" alt="Image moto">
          </div>
          <div class="col-sm-8">
            <h5><strong>Nom :</strong> <span id="motoNom"></span></h5>
            <h5><strong>UGS :</strong> <span id="motoGSU"></span></h5>
            <h5><strong>FACTURE :</strong> <span id="motoAdditionalInfo"></span></h5>
            <h5><strong>Client :</strong> <span id="customer_name"></span></h5>
            <h5><strong>Adresse :</strong> <span id="customer_address"></span></h5>
            <h5><strong>Téléphone :</strong> <span id="customer_phone"></span></h5>
            <h5><strong>CIN :</strong> <span id="customer_cin"></span></h5>
          </div>
        </div>
        <div class="modal-footer">
          <input type="hidden" name="status" value="SORTIE">
          <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
          <button type="submit" class="btn btn-success">Valider</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
$(function() {
  $("#securiteNav").addClass('active');

  // ===== Initialisation DataTable =====$.extend(true, $.fn.dataTable.defaults, {
    language: {
        sProcessing:   "Traitement en cours...",
        sSearch:       "Rechercher&nbsp;:",
        sLengthMenu:   "Afficher _MENU_ &eacute;l&eacute;ments",
        sInfo:         "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
        sInfoEmpty:    "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
        sInfoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
        sLoadingRecords: "Chargement en cours...",
        sZeroRecords:  "Aucun &eacute;l&eacute;ment &agrave; afficher",
        sEmptyTable:   "Aucune donn&eacute;e disponible dans le tableau",
        oPaginate: {
            sFirst:    "Premier",
            sPrevious: "Pr&eacute;c&eacute;dent",
            sNext:     "Suivant",
            sLast:     "Dernier"
        },
        oAria: {
            sSortAscending:  ": activer pour trier la colonne par ordre croissant",
            sSortDescending: ": activer pour trier la colonne par ordre d&eacute;croissant"
        }
    }
});
  $('#manageTable').DataTable({
    ajax: {
      url: '<?= base_url('validateSecurite/fetchSecuriteData') ?>',
      type: 'GET',
      dataSrc: 'data'
    },
    columns: [
      { data: 'image',       title: 'Image',       orderable: false },
      { data: 'ugs',         title: 'UGS'                     },
      { data: 'designation', title: 'Désignation'             },
      { data: 'statut',      title: 'Statut',      orderable: false },
      { data: 'action',      title: 'Action',      orderable: false }
    ],
    order: [[1, 'asc']]
  });

// ===== Edition / validation =====
function editFunc(id) {
  $.post('<?= base_url('validateSecurite/fetchSecuriteDataById') ?>/'+id, function(resp) {
    $('#motoImage').attr('src', resp.image);
    $('#motoNom').text(resp.nom);
    $('#motoGSU').text(resp.ugs);
    $('#motoAdditionalInfo').text(resp.bill_no);
    $('#customer_name').text(resp.customer_name);
    $('#customer_address').text(resp.customer_address);
    $('#customer_phone').text(resp.customer_phone);
    $('#customer_cin').text(resp.customer_cin);
    $('#editModal').modal('show');

    $('#updateForm').off('submit').on('submit', function(e) {
      e.preventDefault();
      $.post(this.action+'/'+id, $(this).serialize(), function(res) {
        $('#editModal').modal('hide');
        $('#manageTable').DataTable().ajax.reload(null, false);
        $('#messages').html(
          '<div class="alert alert-'+(res.success?'success':'danger')+'">'+res.messages+'</div>'
        );
      }, 'json');
    });
  }, 'json');
}
</script>