DataTables server side php pdo ajax

Introduction

Le fait d'utiliser le plugin DataTable en mode Server Side pose des problèmes (que j'ai pu lire souvent sur le net ) au niveau de l'affichage d'un certain nombre de ligne, surtout si on n'utilise pas le script proposé par l'éditeur.

De plus avec ce script (que j'ai essayé), cela fonctionne bien me dirait vous ! mais il est difficile d'ajouter une colonne vide ayant autre chose comme data provenant d'une base de données.

Ce que je veux dire est d'ajouter cette colonne vide afin d'y ajouter des icônes / liens vers des scripts d'édition ou de suppression.
A force d'essais et de recherche, j'ai fini par trouver la solution.

Intégration

En ce qui concere le tableau la structure est la même sauf qu'il n'y a pas la structure (<tbody> ... </tbody>.), puis que nous faisons du server side processing.

Code JavaScript

Dans ce script, on y défini que les cellules ayant un lien (a) dans l'id du tableau(#menuTable) seront éditable.
Le second script, fait référence au lien, avec la fonction (datepicker).

           <script type="text/javascript">
              $(document).ready(function () {
                  $('#users').DataTable({
                      "lengthMenu": [[5, 25, 50, -1], [5, 25, 50, "Tous"]],
                      "columns": [
                          {"data": "ID"},
                          {"data": "MAT"},
                          {"data": "NOM"},
                          {"data": "SRV"},
                          {"data": "POSTE"},
                          {"data": "DAT"},
                          {"data": "MEMBRE"},
                          {
                           "targets": 7,        // numero colonne (commence a 0)
                           "data": null,        // colonne n'ayant aucune donnée en bd
                           "defaultContent": '<img src="images/dossier.png" />',  // contenu (lien, image etc)
                           "orderable" : false,
                          "searchable": false,
                          },				
                      ],
                      "processing": true,
                      "serverSide": true,
                      "ajax": {
                          url: 'data_server_side.php',
                          type: 'POST'
                      }
                  });
              });
          </script>
        

Fichier (data_server_side.php)

Comme je vous l'ai dit je n'utilise pas le script proposé par le site DataTables.net, mais je vous fait part de mon script.
Vous constarez que j'utilise PDO. Le code est assez commenté, je n'en dirais pas plus.
Vous pouvez bien sûr externaliser la fonction (connexion_DB).

          <?php
  if (!empty($_POST) ) {
              /* fonction connect database PDO*/
              function connexion_DB()
              {
                    $db_host = 'localhost';
                    $db_name = ''; //nom database
                    $db_user = 'root'; //nom utilisateur
                    $db_pass = ''; //mot de passe
                    
                  // Connexion à la base
                  try {
                      $strConnection = 'mysql:host='.$db_host.';dbname='.$db_name; //Ligne 1
                      $arrExtraParam= array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"); //Ligne 2
                      $PDO = new PDO($strConnection, $db_user, $db_pass, $arrExtraParam); //Ligne 3; Instancie la connexion
                      $PDO->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);//Ligne 4
                  }
                  catch(PDOException $e) {
                      $msg = 'ERREUR PDO dans ' . $e->getFile() . ' L.' . $e->getLine() . ' : ' . $e->getMessage();
                      die($msg);
                  }
                  return $PDO;
              }
              // - constante declaration de la table
                  define("MyTable", "employes");
              
                  function getData($sql){
                      //appel fonction db
                      $PDO = connexion_DB();
                      $query = $PDO->query($sql);
                      $data = array();
                      foreach ($query as $row ) {
                          $data[] = $row ;
                      }
                      return $data;
                  }
              
                  /* Utiles $ _POST Variables provenant du plugin */
                  $draw = $_POST["draw"];//Utilisé par DataTables pour s'assurer que les retours Ajax des requêtes de traitement côté serveur sont dessinés dans l'ordre par DataTables
                  $orderByColumnIndex  = $_POST['order'][0]['column'];// Index de la colonne de tri (index 0 basé - c'est-à-dire 0 est le premier enregistrement)
                  $orderBy = $_POST['columns'][$orderByColumnIndex]['data'];//Obtenir le nom de la colonne de tri dans son index
                  $orderType = $_POST['order'][0]['dir']; // ASC or DESC
                  $start  = $_POST["start"];//Indicateur d'enregistrement de la première pagination.
                  $length = $_POST['length'];//Nombre d'enregistrements que la table peut afficher dans le tirage actuel
                  /* FIN des POST variables */
              
                  $recordsTotal = count(getData("SELECT * FROM ".MyTable));
              
                  /* SEARCH CASE : Filtered data */
                  if(!empty($_POST['search']['value'])){
              
                      /* WHERE Clause for searching */
                      for($i=0 ; $i<count($_POST['columns']);$i++){
                          $column = $_POST['columns'][$i]['data'];//Nous obtenons le nom de chaque colonne en utilisant son index de la requête POST
                          $where[]="$column like '%".$_POST['search']['value']."%'";
                      }
                      $where = "WHERE ".implode(" OR " , $where);// id like '%searchValue%' or name like '%searchValue%' ....
                      /* End WHERE */
              
                      $sql = sprintf("SELECT * FROM %s %s", MyTable , $where);//Requête de recherche sans clause de limitation (Pas de pagination)
              
                      $recordsFiltered = count(getData($sql));//Nombre de résultats de la recherche
              
                      /* SQL Query pour la recherche avec limit et orderBy clauses*/
                      $sql = sprintf("SELECT * FROM %s %s ORDER BY %s %s limit %d , %d ", MyTable , $where ,$orderBy, $orderType ,$start,$length  );
                      $data = getData($sql);
                  }
                  /* END SEARCH */
                  else {
                      $sql = sprintf("SELECT * FROM %s ORDER BY %s %s limit %d , %d ", MyTable ,$orderBy,$orderType ,$start , $length);
                      $data = getData($sql);
              
                      $recordsFiltered = $recordsTotal;
                  }
              
                  /* Réponse au client avant le codage JSON */
                  $response = array(
                      "draw" => intval($draw),
                      "recordsTotal" => $recordsTotal,
                      "recordsFiltered" => $recordsFiltered,
                      "data" => $data
                  );
                  /* retour JSON */
                  echo json_encode($response);
              
              } else {
                  echo "Aucune requête POST de DataTable";
              }
          ?>       
        

Conclusion

Je vous ai présenté ma méthode ici, toutefois si vous modifiez le paramètre (lengthMenu) de DataTables, sachez que le tableau affichera le nombre de ligne définis dans ce paramètre..

Bon dev