DataTables Datepicker Datetime MySQL


DataTables Datepicker Datetime MySQL

Ce tableau offre la possibilité grâce au plugin Datepicker de filtrer une colonne ayant des dates de type Datetime MySql, ou un TimeStamp.
Deux champs permettent de sélectionner la date de départe et le second champ la date de fin.

Appel des fichiers

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/dataTables.jqueryui.min.css">
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  <link href="media/css/jquery.dataTables.yadcf_0.8.8.css" rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.9/js/dataTables.jqueryui.min.js"></script>
  <script src="media/js/jquery.dataTables.yadcf_0.8.8.js"></script>
  <script src="media/js/ui.datepicker-fr.js"></script>

Requêtes SQL

Voici un exemple type de requête SQL basée sur un champ date de type Datetime.
Le même d'application peut être fait avec un champ date de type timestamp.

require_once('pdo.php'); 
$query_data = $PDO->query("SELECT * FROM table");

Script JavaScript

Le script ci-dessous est assez parlant, notamment par l'ajout de commentaire.

<script type="text/javascript" class="init">
$(document).ready(function () {
  'use strict';
  
  $("div#loader").append('<center><img src="images/loading.gif" alt="chargement..."/></center>');
    var oTable = $('#menuTable').DataTable( {
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Tous"]],
    "stateSave": false,
    "order": [[ 0, "desc" ]],//les colonnes parte de 0 à x
    //on dit que la colonne 0 sera desc, si vous omettez ce parametre les données s'afficheront asc
    //même si dans la requete SQL vous spécifiez un order by desc
    
    "columnDefs": [
            {
                "targets": [ 0 ],//on spécifie le numéro de colonne
                "visible": false,//on spécifie quelle sera cachée
                "searchable": false//on spécifie quelle ne sera pas utilisée pour la recherche
            }
        ],

    "language": {
    "processing":     "Traitement en cours...",
    "search":         "Rechercher :",
    "lengthMenu":     "Afficher _MENU_ éléments",
    "info":           "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
    "infoEmpty":      "Affichage de l'élement 0 à 0 sur 0 éléments",
    "infoFiltered":   "(filtré de _MAX_ éléments au total)",
    "infoPostFix":    "",
    "loadingRecords": "Chargement en cours...",
    "zeroRecords":    "Aucun élément à afficher",
    "emptyTable":     "Aucune donnée disponible dans le tableau",
    "paginate": {
        "first":      "Premier",
        "previous":   "Précédent",
        "next":       "Suivant",
        "last":       "Dernier"
           }
    },//fin langage
    
    "fnDrawCallback": function() {
          $(this).show();
      $('div#loader').hide();
          $(this).show().css('width', '100%');
      },
    "initComplete": function () {
            var api = this.api();
            api.$('td.api').click( function () {
                api.search( this.innerHTML ).draw();
            } );
        }
  } );//fin datatable


   yadcf.init(oTable, [
  {
    column_number: 4,
    filter_type: "range_date",
    filter_delay: 500,
    date_format: "dd-mm-yyyy",
  }
  
  ]); // parametre ], 'tfoot'); pour avoir les filtres dans le tfoot



  $('button.btn').click(function() {
    $('input[type=search]').val('');
    $dTable.fnFilter('');
  } );

  $("button.btn" ).button({
    icons: { primary: 'ui-icon-refresh' },
    text: false
  });
  
  $("#clear" ).button({
    icons: { primary: 'ui-icon-refresh' },
    text: false
  });

  $('a.delete').button({
    icons: { primary: 'ui-icon-trash'  },
    text: false
  });
 
  $('a.edit').button({
    icons: { primary: 'ui-icon-pencil'  },
    text: false
  });

 });//fin ready  

</script>
          

Code du tableau

Voici à titre d'exemple la construction type du tableau, vous pouvez remarquer que pour le format date de type datetime, est convertit au format français.

 <table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="menuTable">
              <thead>
                <tr>
                    <th colspan="7">Filtrer les fichiers par date de début et de fin</th>
                </tr>
                <tr>
                        <th>ID</th>
                        <th>Titre</th>
                        <th>Description</th>
                        <th>Logiciel</th>
                        <th>Date</th>
                        <th>Catégorie</th>
                        <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <?php
              while ($row = $query_data->fetch(PDO::FETCH_ASSOC)) {
              ?>  
                <tr>
                         <td width="15%"><?php echo $row['id']; ?></td>
                        <td width="15%"><?php echo $row['titre']; ?></td>
                        <td width="30%"><?php echo stripslashes($row['description']); ?></td>
                        <td width="10%"><?php echo $row['catlog']; ?></td>
                        <?php
                        $date_tuto = $row['date_fichier'];
              $date_fr = strftime('%d-%m-%Y', strtotime($date_tuto));
            ?>
                        <td width="10%" align="center"><?php echo $date_fr;?></td>
                        <td width="20%"><?php echo $row['catname']; ?></td>
                         <td width="10%"><a class="edit" href="#"></a> <a class="delete" href="#"></a></td>
                </tr>
                <?php
              }
              ?>
              </tbody>
              <tfoot>
                <tr>
                      <th colspan="7"> <div class="toolbar2"><button class="btn">Reset</button></div></th>
                </tr>
              </tfoot>
            </table>
   

Placement des icônes en css et des champs datepicker

Ces classes CSS pour les icônes sont valables pour toutes les tableaux montrés en démo, tandis que les classes CSS (dtable) ne sont utiles que si l'on intégre des objets dans le header de Datatables..

          .toolbar2{
           position:absolute;
           top:8px;
           left:1300px;/*a positionner selon la largeur du tableau*/
           }

          /*icone delete et edit*/
          a.delete, a.edit, #clear {padding:6px 1px 6px 1px;}
        

 

Conclusion

Reste à construire votre propre tableau avec vos données dynamique selon votre table MySQL.

Bon dev.