DataTables dropdown liste dossier

Introduction

Dans un tableau DataTables ont n'affiche pas que des données provenant d'une base de données, mais on peut aussi y afficher des fichiers de diverses extensions issus d'un dossier.

Présentation

Comme le montre cette image ci-dessous, j'ai intégré dans le header un select qui permet de choisir un dossier et d'y afficher les fichiers qu'il contient.

Cependant, l'utilisation d'un select qui affiche les dossiers a recours à une fonction PHP .

Ou voir cette image (nouvelle fenêtre) 2 tableaux DataTables explorateur

 

Ce genre de tableau peut être utile dans un espace admin. Ou présenté coté client pour y afficher des fichiers spécifiques à partir de dossiers spécifiques.

Ici, le tableau est simple, il n'affiche qu'une icone spécifique au nom du fichier et son type mime..
Mais on pourrait le rendre plus attractif avec plus d'options, du genre :

Afficher le poids des fichiers.
Ajouter la taille pour les images.
Ajouter une colonne Actions, permettant d'ajouter des icones pour prévisualiser le document dans une boite modal.
Ajouter une checkbox pour chaque fichier, afin d'en sélectionner un certain nombre pour générer une archive ZIP.
L'image ci-dessous (zoomer dessus) possède 2 tableaux DataTables dont un pour les dossier et un pour les fichiers avec les options citées ci-dessus.

Fonction PHP et tableau DataTables

Le code ci-dessous intégre la fonction php de listage des dossiers et la structure du tableau dataTables..

            <?php
            $root = 'devdocs2/'; // ou ../
            // autorisation des extensions
            $file_types = 'php,txt,html,css,js,rar,zip,pdf,jpg,png,gif,mp4,mp3';
            
            function directoryToArray($root, $to_return='b', $file_types=false) {
              $array_items = array();
              if ($file_types) { $file_types=explode(',',$file_types); }
              if ($handle = opendir($root)) {
                while (false !== ($file = readdir($handle))) {
                  if ($file != "." && $file != "..") {
            
                    $add_item = false;
                    $type = (is_dir($root. "/" . $file))?'d':'f';
                    $name = preg_replace("/\/\//si", "/", $file);
            
                    if ($type=='d' && ($to_return=='b' || $to_return=='d') ) {
                      $add_item = true;
                    }
            
                    if ($type=='f' && ($to_return=='b' || $to_return=='f') ) {
                        
                      $exts = explode('.',$name);
                      $ext = strtolower(end($exts));
                        
                      //$ext = end(explode('.',$name));
                      //provoque une erreur - Strict standards: Only variables should be passed by reference in
                      //en php 5.5.x mais pas en php 5.6.x
                      if ( !$file_types || in_array($ext, $file_types) ) {
                        $add_item = true;
                      }
                    }
            
                    if ($add_item) {
                      $array_items[] = array ( 'name'=>$name, 'type'=>$type, 'root'=>$root);
                    }
                  }
                } //fin while
                closedir($handle);
              } //fin If
              return $array_items;
            }
            
            $directoryList = directoryToArray($root,'d');
            echo '<div class="toolb">';
            echo '<form name="pickFile" method="POST">';
            echo '<select class="selectfolder" id="folder" name="folder" onchange="changeFolder(this.value);">';
            
            foreach ($directoryList as $folder) {
              $selected = ($_POST[folder]==$folder[name])? 'selected' : '';
              echo "<option data-image=\"images/explorateur/32px/repertoire16.png\" value=\"$folder[name]\" $selected>$folder[name]</option>\n"; 
            }
            echo '</select></div>';//<br><br>
            
            $working_folder = ($_POST[folder]) ? $_POST[folder] : $directoryList[0][name];
            $fileList = directoryToArray($root.'/'.$working_folder,'f',$file_types);
            ?>
            <table width="50%" border="0" cellspacing="0" cellpadding="0" class="display" id="menuTable">
              <thead>
              <tr>
                  <th width="5%">Icons</th>
                  <th width="10%">Fichiers</th>
                  <th width="10%">Types</th>
              </tr>
              </thead>
              <tbody>
            <?php
            foreach ($fileList as $file) {
              $fil = pathinfo($file[name], PATHINFO_EXTENSION);
            ?>
                  <tr>
                    <td width="5%" align="center"><img src="images/explorateur/32px/<?php echo $fil; ?>.png" align="absmiddle"></td>
                    <td><?php echo $file[name]; ?></td>
                    <td align="center">
                        <?php
                        echo '<span>'.aff_image_fichier($file[name], 1).'</span>'; 
                        echo '<span>'.aff_image_fichier($file[name], 2).'</span>';
                        ?>
                    </td>
                  </tr>
            <?php
            }//fin foreach
            ?>
              </tbody>
              <tfoot>
                <tr>
                    <th colspan="3"> </th>
                </tr>
              </tfoot>
            </table>
            </form>
        

Explication du code

Dans le code ci-dessus, qui est commenté, il y manque la fonction php pour avoir le type mime des fichiers, et le script javascript de DataTables, voir (https://datatables.net/).
Il y manque aussi le plugin pour la mise en forme du select avec des images voir (http://www.marghoobsuleman.com/jquery-image-dropdown), rien ne vous empêche aussi de les styliser en CSS.
De comment intégrer le select dans le header du tableau DataTables voir le tutoriel (style header).
D'ailleurs il y a ligne 45 et 53 un bloc div ayant la class (toolb), qui nous servira à cette intégration via le script de DataTables.
Puis les icônes, mais on en trouve partout sur le nets.

Code JavaScript

Ce script, ou plutôt la fonction est appelée dans le formulaire pour le changement de dossier.

           <script type="text/javascript">
              function changeFolder(folder) {
                document.pickFile.submit();
              }
          </script>
        

Les fichiers

Voici les fichiers utilisés pour utilisé le tableau DataTables, ainsi que les bibliothèques JQuery

Ces fichiers sont tous utilisés à partir de CDN. Reste le choix du thème.

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

Conclusion

Je vous ai présenté ma méthode ici, mais peut être y a t'il mieux en PHP ou tout en AJAX que j'ai déjà testé, en tout cas dans tous mes essais cela fonctionne.

Bon dev