DataTables server processing delete checkbox pdo

Ce tableau offre la possibilité de suppression d'un enregistrement via une checkbox insérée devant chaque ligne du tableau.
Ainsi, la suppression peut être individuelle ou complète.

Cette application comporte 3 pages, dont une page principale, une page appellée en Ajax pour la fonction Server Side, et une page pour la suppression d'un ou plusieurs enregistrement le tout en PDO.

Création de la page principale

Cette page contiendra les scripts suivants :

Appel des fichiers dans la section HEAD

      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/dataTables.jqueryui.min.css">
      <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
      <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
      <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.10/js/dataTables.jqueryui.min.js"></script>

Style CSS pour l'affichage du bouton

En dessous de l'appel des fichiers insérer le code CSS, cela permet d'afficher le bouton customisé dans le header du tableau Datatables.

.dtable_custom_controls{position:absolute;z-index:50;margin-left:500px;margin-top:5px; margin-bottom:2px;}
#employee_length{margin-left:200px;}

Structure du tableau

Comme nous utilisons Server Side Processing, le tableau est composé ainsi.

<div class="dtable_custom_controls">
            <input type="checkbox"  id="Delete"  /> <button type="button" id="deleteTriger">Supprimer</button>
            </div>
       
        
      <div style="width:50%; margin: 0 auto;">
      <table id="employee"  cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
          <thead>
            <tr>
              <th align="left">Action</th>
              <th>Matricule</th>
              <th>Nom</th>
              <th>Service</th>
                            <th>Poste</th>
            </tr>
          </thead>
                    <tfoot>
                      <th colspan="5"></th>
                    </tfoot>
      </table>

Script JavaScript

Le script ci-dessous est assez parlant, notamment par les noms des colonnes de la table MySQL.

<script type="text/javascript" language="javascript" >
      $(document).ready(function() {
        var dataTable = $('#employee').DataTable( {
          "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Tous"]],
          "processing": true,
          "serverSide": true,
          "columnDefs": [ {
              "targets": 0,
              "orderable": false,
              "searchable": false
               
            } ],
          "language": { "url": "https://cdn.datatables.net/plug-ins/1.10.10/i18n/French.json"},  
          
          "ajax":{
            url :"employe-data-pdo.php", // json datasource
            type: "post",  // method  , by default get
            error: function(){  // error handling
              $(".employee-error").html("");
              $("#employee").append('<tbody class="employee-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
              $("#employee_processing").css("display","none");
              
            }
          }
        } );
        //custom button
        $( "button#deleteTriger" ).button({icons: { primary: 'ui-icon-close' }, text: true});
        
        $("#Delete").on('click',function() { // bulk checked
          var status = this.checked;
          $(".deleteRow").each( function() {
            $(this).prop("checked",status);
          });
        });
        
        $('#deleteTriger').on("click", function(event){ // triggering delete one by one
          if( $('.deleteRow:checked').length > 0 ){  // at-least one checkbox checked
            var ids = [];
            $('.deleteRow').each(function(){
              if($(this).is(':checked')) { 
                ids.push($(this).val());
              }
            });
            var ids_string = ids.toString();  // array to string conversion 
            $.ajax({
              type: "POST",
              url: "employe-delete-pdo.php",
              data: {data_ids:ids_string},
              success: function(result) {
                dataTable.draw(); // redrawing datatable
              },
              async:false
            });
          }
        });
        
} );//fin ready        
</script>

Code de la page (employe-data-pdo.php)

Voici le code de cette page avec les commentaires.

<?php
/* Database connection */
require('pdo.php');


// storing  request (ie, get/post) global array to a variable  
$requestData= $_REQUEST;


$columns = array( 
// datatable index des colonnes  => database nom des colonnes
  0 =>'MAT', 
  1 => 'NOM',
  2 => 'SRV',
  3 => 'POSTE'
);

try
{
    $sql= "SELECT ID FROM employes";
    $query = $PDO->prepare($sql);
    $query->execute();
    $totalData = $query->rowCount();
    $totalFiltered = $totalData;
    
    
    $sql = "SELECT ID, MAT, NOM, SRV, POSTE FROM employes WHERE 1=1";
    $sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]."   ".$requestData['order'][0]['dir']."  LIMIT ".$requestData['start']." ,".$requestData['length']."   ";
    $query = $PDO->prepare($sql);
    $query->execute();
    $totalFiltered = $query->rowCount();
    
    if( !empty($requestData['search']['value']) ) {
      $sql.=" AND ( NOM LIKE '".$requestData['search']['value']."%' ";    
      $sql.=" OR POSTE LIKE '".$requestData['search']['value']."%' ";
      $sql.=" OR SRV LIKE '".$requestData['search']['value']."%' )";
    }
    
    $data = array();
    $i=1+$requestData['start'];
    while( $row = $query->fetch(PDO::FETCH_ASSOC) ) { 
      $nestedData=array(); 
    
      $nestedData[] = "<input type='checkbox'  class='deleteRow' value='".$row['ID']."'  /> #".$i ;
      $nestedData[] = $row["MAT"];
      $nestedData[] = $row["NOM"];
      $nestedData[] = $row["SRV"];
      $nestedData[] = $row["POSTE"];
      
      $data[] = $nestedData;
      $i++;
    }
}
  catch (PDOException $e) {
  echo 'PDOException : '.  $e->getMessage();
  }

$json_data = array(
      "draw"            => intval( $requestData['draw'] ),   // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw. 
      "recordsTotal"    => intval( $totalData ),  // total number of records
      "recordsFiltered" => intval( $totalFiltered ), // total number of records after searching, if there is no searching then totalFiltered = totalData
      "data"            => $data   // total data array
      );

echo json_encode($json_data);  // send data as json format

?>

Code de la page (employe-delete-pdo.php)

Cette page permet la suppression d'un ou plusieurs enregistrements selon le nombre de checkboxs cochées.
NOTA : cette page dans la démo est désactivée, j'ai pas envie que des fous complets supprimes tout.

<?php
/* Database connection start */
require ('pdo.php');
$data_ids = $_REQUEST['data_ids'];
$data_id_array = explode(",", $data_ids); 
if(!empty($data_id_array)) {
  try
  {
  foreach($data_id_array as $id) {
    $sql = "DELETE FROM employes WHERE ID = '".$id."'";
    $query = $PDO->prepare($sql);
    $query->execute();
  }
  }
  catch (PDOException $e) {
  echo 'PDOException : '.  $e->getMessage();
  }
}
?>

 

Conclusion

Voilà une application avec PDO, que vous pourrez adapter à vos propres tables MySQL, cette application a été réalisée avec PHP 5.5.12.

Bon dev.