Datatables version 1.10.x (Paramètres)


Le cas du mode ASC et DESC

Le problème peut venir lorsque que le tableau utilise une base de données, en effet, avec une requête simple, le tableau affiche les données dans un ordre ASC (ascendant).
Si toutefois vous souhaitiez avoir vos données DESC (descendant), et même si vous spécifier dans votre clause ORDER BY DESC, le tableau affichera toujours les données en mode ASC.
Ce n'est pas la requête SQL qui a la priorité, mais le plugin qui gére le tableau.

Pour résoudre, ce problème, il faut ajouter un paramètre dans le script, sachant que les colonnes commencent à ZERO.
Dans le script il suffit d'ajouter ceci ("order": [[ 0, "desc" ]]) qui dit voilà, j'affiche les données en mode (desc) en partant de la colonne zéro.

Oui mais voilà, que contient votre colonne (zéro) ?. Je vous laisse réfléchir un instant !
En fait c'est relativement simple, la colonne (zéro) sera tout simplement la colonne (id) de votre table MySQL.
On imagine que nous ayons notre table (id, nom, prénom, date_ins). Votre tableau devra comporter 4 colonnes, mais pour DataTable cela sera (0,1,2,3), ce qui fait 4 colonnes.
Avec l'intégration de la colonne (id) dans le tableau, on utilise aisément le paramètres ci-dessus. Ce qui permet d'afficher les données dans le tableau en mode ASC ou DESC.
Cependant vous ne voulez pas voir cette colonne (id) tout en conservant l'un des modes.

La solution, en réfléchissant un peu, est simple, mais bon, si vous utilisez un tableau Datatables pour afficher des données en provenance d'une base de données, il suffit pour cela, d'ajouter dans le (thead) une colonne porant le nom de ID, puis, de faire de même dans le (tbody), en y ajoutant la données dynamique.

Vous allez me dire, oui mais je ne veux pas que la colonne ID s'affiche, ok très bien.
Pour cela, dans le script Datatables il suffit d'ajouter ceci :

		"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
            }
        ],
          

Ce qui aura pour conséquence, en utilisant les paramètres ci-dessus, d'avoir un affichage du tableau avec des données en mode (desc ou asc) qui de plus sera cachée.

Attentions toutefois, lorsque vous utiliserez le paramètre ci-dessus, car, pour ma part, je n'utilise qu'un seul script pour tous mes tableaux, ce qui veut dire, que chaque page n'a pas son propre script, mais un script commun pour mes pages contenant un tableau Datatables.

Donc, si vous un tableau, et que vous n'avez pas ou que vous ne voulez pas utiliser de colonne ID, la aussi, l'astuce que j'ai trouvée, et d'ajouter dans le (thead) une colonne vide, ainsi que dans le (tbody).
Ainsi, supposons que votre tableau commencent en colonne zéro et affichant une image par exemple, et bien celle-ci ne sera pas visible, mais si vous appliquer l'astuce dont je viens de parler, non seulement la colonne vide, ne sera pas affichée, mais en plus la colonne de vos images passera en colonne (1) et non plus zéro.

Styling

Auparavant, on spécifiez dans la version 1.9.4 ce paramètre ("bjQueryUI": true,) pour utiliser un des thèmesRoller JQuery UI.
Maintenant il n'est plus nécessaire de le spécifier, on utilise une autre façon, que j'apprécie beaucoup.
Toutefois ce paramètres est utile si on modifie le (dom), dans sa nouvelle version, car l'ancien était (sDom), si on applique ces paramètres au (dom) ("dom": '<"H"lfr>t<"F"ip>',), votre tableau n'utilisera plus les thèmes JQuery UI.
Pour avoir à la fois le (dom), tel que ci-dessus, il faut ajouter le paramètre ("jQueryUI":true,), dans sa nouvelle version.

Pagination

La aussi, dans la version 1.9.4 on spécifiez le type de pagination que l'on voulait avec ce paramètre ("pagingType": "full_numbers",).
Maintenant, il n'est plus nécessaire de le spécifier. Quoi que, si on veut modifier la pagination, il suffit d'utiliser cette alternative ("pagingType": "full_numbers") ce qui permet d'avoir des boutons de navigations avant et après.

Utilisation de CDN

Comme je le citais, plus haut, j'utilise le mode CDN DataTables pour la création des tableaux, mais pas seulement.
Car dans un premier temps, voyons un configuration type :

Lien pour JQuery UI (https://datatables.net/manual/styling/jqueryui)

Lien pour tout les fichiers DataTables (https://cdn.datatables.net/plug-ins/) Choisissez le numéro de version le plus proche de la date actuelle.


<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/1.10.13/css/dataTables.jqueryui.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/plug-ins/1.10.13/features/mark.js/datatables.mark.min.css" rel="stylesheet" type="text/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>
        
        
<script type="text/javascript" class="init">        
           $(document).ready(function() {
            oTable = $('#menuTable').dataTable( {
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Tous"]],
                "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
                //permet de cacher la colonne 0 soit id
                "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": { "url": "https://cdn.datatables.net/plug-ins/1.10.13/i18n/French.json"},
            } );//fin datatable
         });//fin ready
</script>
        

Comme on peut le voir, sur le script ci-dessus, j'utilise aussi le mode CDN pour le fichier de langue.

Les fichiers CDN

Voici, les fichiers CDN à utiliser pour la création de tableau avec un thèmeRoller JQuery UI.
Concernant les fichiers propres à DataTables, ils sont disponibles sur le site.
L'emploi de ce mode, même en local, sur votre serveur web fonctionne aussi, quand vous testez vos pages, il suffit d'être connecté à Internet, c'est tout.
Mais l'avantage aussi de l'emploi du mode CDN est qu'il n'oblige à héberger aucun fichier, pour le peu que l'espace disque soit restreint. Et que la mise à jour est plus facile.
D'autres part, si vous souhaitez changer de thème, si suffit de remplacer (smoothness) par un autre nom de thème, que vous trouverez la aussi sur le site de JQuery UI ThemeRoller.

D'autres part, si vous souhaitez utiliser des plugins additionnels, le mode CDN existe aussi pour eux.


 

Filtrage des colonnes

Depuis peu, je cherchais à filtrer des colonnes du tableau. Selon moi il existe 3 façons de filtrer des données (soit en dur ou provenant de MySQL) du tableau.
Ces filtrages seront vues au cours des pages suivantes.
La première : Un clic sur une donnée du tableau, permet de remplir la zone de recherche et le tableau est filtrer avec l'item cliqué. Un bouton (icône) peut être inséré à coté de cette zone de recherche afin de vider le champ, pour retrouver un affichage normal.
La deuxième : Est d'insérer dans toutes les colonnes ou des colonnes spécifiques des champs de texte (input text). Un bouton(icône) peut être inséré à coté de chaque champ, afin de vider le ou les champs afin de retrouver un affichage normal.
La troisième : Est d'insérer dans toutes les colonnes ou des colonnes des listes déroulantes (select).

 

Trie des colonnes

Sur un tableau il peut arriver de désactiver complétement et sur toutes les colonnes le tri.
Car comme on la vu, on a la possibilité d'avoir plusieurs mode de filtrage.
Pour désactiver le tri ("ordering": false,) de toutes les colonnes

 

Erreur fonction  (MAJ le 27/03/2017)

Si lors de la création de fonction dans votre script, la console affiche (the function xx is not a function in datatable.js). Cela provient d'une lettre de la fonction datatable que l'on doit mettre en capitale.
Puisque avant la version 1.10 nous avions (var table = $('#sample').dataTable();), maintenant nous devons écrire (var table = $('#sample').DataTable)

Voici le même code avec le paramètre (DataTable)


<script type="text/javascript" class="init">        
           $(document).ready(function() {
            oTable = $('#menuTable').DataTable( {
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "Tous"]],
                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
                //permet de cacher la colonne 0 soit id
                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: { "url": "https://cdn.datatables.net/plug-ins/1.10.13/i18n/French.json"},
            } );//fin datatable
         });//fin ready
</script>
        

 

D'autres paramètres ne sont pas pris en compte avec le paramètre (dataTable), tandis qu'il le sont avec le paramètres (DataTable), surtout dans les fonctions de callbacks et comme (fnFilter) par exemple.

Conclusion

Je pense que pour le moment, ce que je viens de relater, peut servir à tous le monde.
Si toutefois, cela, vous semble pas suffisant, il vous reste le site officiel, très bien fait, mais en anglais, ce qui n'est pas un problème pour moi, mais peu rebuter d'autres.
Vous avez aussi, le forum, dont les utilisateurs partagent leurs expériences (en anglais aussi).
Ce tutoriel s'agrandira au fur et à mesure lors de mes tests sur cette nouvelle version.