Datatables ce plugin pour jQuery, que j’ai déjà présenté par deux fois, permettant la gestion des tableaux HTML créé et maintenu par Allan Jardine viens d’être mis à jour en version beta 1.7.

jQuery, ce merveilleux framework qui nous permet de faire tellement de choses … Bien souvent je suis passé à côté de fonctionnalités on ne peut plus simple à utiliser mais tellement utiles.

Du genre, je dois envoyer ce formulaire avec AJAX, il contient plein de champs différents, comment faire pour que ce soit le plus simple et rapide possible ?

Tout d’abord imaginons un formulaire regroupant plusieurs champs sur toute la page.

Coordonnées

Mail :


Téléphone :


...

Newsletter :


...

Rien de bien compliqué jusque là mais n’oubliez pas d’inclure la librairie jQuery !
On créé ensuite la page qui va traiter nos données, appelons-la post.php :

  <?php
    foreach($_POST as $key => $value)
      echo "
$key => $value

";
  ?>
 

Il ne nous reste plus que la partie qui nous intéresse ici, le code javascript :

$(document).ready(function(){
	$("#formulaire").submit(function(){
		$.ajax({type:"POST", data: $(this).serialize(), url:"post.php",
			success: function(data){
				$("#post").html(data);
			},
                        error: function(){
			        $("#post").html('Une erreur est survenue.');
			}
		});
		return false;
	});
});

Tout ce qu’on a à faire c’est ré-implémenter la fonction submit du formulaire et sérialiser ses champs avec la fonction ‘serialize()’ pour envoyer les données.
C’est tout bête mais je ne connaissais pas cette fonction et on ne développe pas toujours avec un IDE qui liste pour nous les fonctions à utiliser !
Enfin comme dit le vieil adage : RTFM !

J’avais présenté ce fabuleux plugin pour jQuery qu’est Datatables et expliqué rapidement ce dont il est capable.
Aujourd’hui je vous propose une mise en situation, avec comme objectif l’interaction avec une base de données, une traduction en français (ou une autre langue parmi les 29 disponibles), la mise en forme avec l’aide jQuery-UI, et d’autres fonctionnalités.

Tout d’abord si vous ne possédez pas encore le plugin téléchargez-le ici.
Ensuite nous allons placer le code de notre tableau dans notre page, imaginons que l’on souhaite afficher des utilisateurs :

<table id="datatable" >
  <thead>
       <tr>
            <th>Nom</th>
            <th>Prénom</th>
            <th>Inscription</th>
            <th>Mail</th>
            <th></th>
        </tr>
  </thead>
 <tbody>
       <tr>
            <td colspan="4">Chargement des données...</td>
        </tr>
  </tbody>
</table>

Maintenant le code Javascript. Nous allond indiquer que l’on souhaite récupérer les données via un fichier côté serveur :

$(document).ready(function() {
	$('#datatable').dataTable( {
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "get_data.php"
	} );
} );

Le plugin ira donc récupérer le fichier get_data.php pour remplir le tableau. Les données renvoyées par le fichier php doivent être au format JSON.
Voici un exemple du contenu de get_data.php inspiré de la documentation de Datatables mais vous êtes libre de modifier le code pour utiliser PDO, ou une autre méthode d’accès à la base de données si vous utilisez un autre SGBD que MySQL.

<?php
  /* MySQL connection */
	$gaSql['user']       = "username";
	$gaSql['password']   = "password";
	$gaSql['db']         = "mydb";
	$gaSql['server']     = "localhost";
	$gaSql['type']       = "mysql";

	$gaSql['link'] =  mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) or
		die( 'Could not open connection to server' );

	mysql_select_db( $gaSql['db'], $gaSql['link'] ) or
		die( 'Could not select database '. $gaSql['db'] );

	/* Paging */
	$sLimit = "";
	if ( isset( $_GET['iDisplayStart'] ) )
	{
		$sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
			mysql_real_escape_string( $_GET['iDisplayLength'] );
	}

	/* Ordering */
	if ( isset( $_GET['iSortCol_0'] ) )
	{
		$sOrder = "ORDER BY  ";
		for ( $i=0 ; $i<mysql_real_escape_string( $_GET['iSortingCols'] ) ; $i++ )
		{
			$sOrder .= fnColumnToField(mysql_real_escape_string( $_GET['iSortCol_'.$i] ))."
			 	".mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
		}
		$sOrder = substr_replace( $sOrder, "", -2 );
	}

	/* Filtrage - Remplace le filtrage côté client, peut donc être long si la base de données est importante
	 */
	$sWhere = "";
	if ( $_GET['sSearch'] != "" )
	{
		$sWhere = "WHERE nom LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ".
		                "prenom LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ".
		                "inscription = '".mysql_real_escape_string( $_GET['sSearch'] )."' OR ".
		                "mail = '".mysql_real_escape_string( $_GET['sSearch'] )."'";
	}

	$sQuery = "SELECT id, nom, prenom, inscription, mail FROM users $sWhere $sOrder $sLimit";
	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());

	$sQuery = "SELECT FOUND_ROWS()";

	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
	$iFilteredTotal = $aResultFilterTotal[0];

	$sQuery = "SELECT COUNT(id)	FROM users";
	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
	$aResultTotal = mysql_fetch_array($rResultTotal);
	$iTotal = $aResultTotal[0];

	$sOutput = '{';
	$sOutput .= '"sEcho": '.intval($_GET['sEcho']).', ';
	$sOutput .= '"iTotalRecords": '.$iTotal.', ';
	$sOutput .= '"iTotalDisplayRecords": '.$iFilteredTotal.', ';
	$sOutput .= '"aaData": [ ';
	while ( $aRow = mysql_fetch_array( $rResult ) )
	{
		$sOutput .= "[";
		$sOutput .= '"'.addslashes($aRow['nom']).'",';
		$sOutput .= '"'.addslashes($aRow['prenom']).'",';
		$sOutput .= '"'.addslashes(date(H:i d/m/Y'', $aRow['inscription'])).'",';
		$sOutput .= '"'.addslashes($aRow['mail']).'"';
		$sOutput .= '"Détails"';
		$sOutput .= "],";
	}
	$sOutput = substr_replace( $sOutput, "", -1 );
	$sOutput .= '] }';

	echo $sOutput;

	function fnColumnToField( $i )
	{
		if ( $i == 0 )
			return "nom";
		else if ( $i == 1 )
			return "prenom";
		else if ( $i == 2 )
			return "inscription";
		else if ( $i == 3 )
			return "mail";
	}
?>

Et voilà notre tableau se remplit automatiquement avec les données renvoyées par le fichier get_data.php.
La méthode utilisée dans l’exemple pour renvoyer les données au format JSON est un peu barbare, utiliser json-encode sur un array serait à mon humble avis plus approprié, à vous de voir.

  intval($_GET['sEcho']),
				  'iTotalRecords'=>$iTotal,
				  'iTotalDisplayRecords'=>$iFilteredTotal);
 $aaData = array();        

	while ( $aRow = mysql_fetch_array( $rResult ) )
	{
            $tmp = array();
	    $tmp[] = addslashes($aRow['nom']);
		$tmp[] = addslashes($aRow['prenom']);
		$tmp[] = date(H:i d/m/Y'', $aRow['inscription']);
		$tmp[] = addslashes($aRow['mail']);
		$tmp[] = '<a href="user.php?id='.$aRow['id'].'">Détails</a>';

		$aaData[] = $tmp;
	}
   $sOutput['aaData'] = $aaData;

   echo json_encode($sOutput);

Je n’ai pas testé le code mais cela devrait fonctionner.

Bon tout ça c’est bien beau mais on aimerait bien avoir une traduction en français plutôt que d’avoir Show 10 entries, Search ect, car même si on comprend ça fait tâche.
Et bien le plugin nous offre la possibilité de traduire le plugin dans pas moins de 29 langues dont l’anglais, l’allemand, l’espagnol, le portugais, le chinois etc.
Pour mettre en place la traduction il n’y a rien de plus simple, on va rajouter une option dans la déclaration de notre tableau :

$(document).ready(function() {
	$('#datatable').dataTable( {
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "get_data.php",
                "oLanguage": { "sUrl": "datatable_fr.txt" }
	} );
} );

Il suffit ensuite de placer la traduction correspondante dans le fichier datatable_fr.txt. La liste des codes à placer est disponible ici.
Vous pouvez modifier les traductions ou bien créer les vôtres très simplement. Pour éviter un appel du fichier sur le serveur vous pouvez également faire comme ceci :

$(document).ready(function() {
	$('#datatable').dataTable( {
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "get_data.php",
                "oLanguage": { "sProcessing":   "Traitement en cours...",
                   "sLengthMenu":   "Afficher _MENU_ éléments",
	           "sZeroRecords":  "Aucun élément à afficher",
	           "sInfo": "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
	           "sInfoEmpty": "Affichage de l'élement 0 à 0 sur 0 éléments",
	           "sInfoFiltered": "(filtré de _MAX_ éléments au total)",
	           "sInfoPostFix":  "",
	           "sSearch":       "Rechercher:",
	           "sUrl":          "",
	           "oPaginate": {
		        "sFirst":    "Premier",
		        "sPrevious": "Précédent",
		        "sNext":     "Suivant",
		        "sLast":     "Dernier"
	               }
                }
	} );
} );

Enfin on aimerait styliser notre tableau et donc utiliser la puissance de jQuery-UI. Pour cela rien de plus simple, il suffit de posséder les fichiers de jQuery-UI (.js, .css et les images) et de les avoir inclus. Comme pour la traduction une simple ligne suffit :

       ...
       "bJQueryUI": true,
       ...

Vous pouvez voir encore plus d’exemple sur cette page.

Un problème qui revient souvent pour les développeurs Web : écrire un code CSS compatible avec tous les navigateurs. Enfin quand on dit tous ça sous-entend bien évidemment Internet Explorer et sa gestion foireuse du CSS3…

De plus en cette période où le Web est « 2.0″, on aime bien mettre des arrondis partout.
Un problème se pose toutefois : comment éviter d’utiliser des images ? Sous Firefox/Gecko on possède la propriété -moz-border-radius, sous Webkit(Safari, Chrome etc…) -webkit-border-radius, sous KHTML(Konqueror) -khtml-border-radius, sous Opera une propriété sera disponible sous Presto 2.3 (actuellement 2.2), et sous IE : rien.

Malheureusement, la solution proposée ci dessous n’est pas compatible avec Opera, cependant, comme indiqué plus haut la nouvelle version de Presto, qui devrait arriver courant 2010, va arranger cela.

Le problème concerne donc IE, et Microsoft pour palier aux manques de son navigateurs a créé en 1998 les fichiers HTC. Mélange d’HTML et de balises HTA, les fichiers HTC peuvent contenir du code JScript ou VBScript. Ils disposent également de fonctionnalités comme la possibilité de permettre à IE d’afficher la couche alpha des images PNG (via AlphaImageLoader), ou d’appliquer un comportement :hover sur d’autres balises que <a>.

Le code suivant utilise justement un fichier HTC via la propriété behavior :

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
behavior:url('./border-radius.htc');

Vous pouvez télécharger le fichier HTC à cette adresse.
Sachez toutefois que ce code n’est pas conforme aux normes CSS3 établies par le W3C, néanmoins il permet de combler certains manques sur IE.

DataTables est tout simplement un plugin pour jQuery hallucinant ! Il permet la manipulation complète des tableaux HTML.

Il offre tout aussi bien le filtrage des données à la volée que le tri des colonnes avec auto-détection du type de données que la pagination ou bien encore l’internationalisation.

Extrêmement complet, stable (plus de 1300 tests unitaires), offrant un panel d’action très large, DataTables rentre dans ma liste de plugins favoris !

Un petit exemple tiré de la doc officielle :

$(document).ready(function() {
	$('#example').dataTable( {
		"aoColumns": [
			/* Engine */   { "fnRender": function ( oObj ) {
				return oObj.aData[0] +' '+ oObj.aData[3];
			} },
			/* Browser */  null,
			/* Platform */ null,
			/* Version */  { "bVisible": false },
			/* Grade */    { "sClass": "center" }
		] } );
} );

Cet exemple permet de ‘customiser’ le rendu de chaque colonne. Ainsi la première colonne se voit ajouter la valeur de la 4ème, qui elle se retrouve cachée, alors que la dernière est centrée.

Mais ce n’est qu’un mince aperçu des possibilité du plugin. A essayer d’urgence !

Site Officiel

Qui ne n’est jamais pris la tête pour styliser ses formulaires, que tout soit bien aligné, compatible avec tous les navigateurs récents, et en plus joli ?

Et bien Lucian Slatineanu a la solution à tous vos problèmes ! Cet américain comme son nom l’indique à tout simplement créé un script JS qui modifie le code HTML de vos formulaires pour les rendre tous beaux tous propres ! Le script injecte en réalité du CSS pour styliser les formulaires à l’aide d’images.

On appréciera la simplicité enfantine de la mise en place du script, en effet il vous suffit d’inclure le fichier Javascript :

...

...

Vous pouvez ensuite choisir de styliser tel formulaire ou tel formulaire en ajoutant simplement une propriété class :

...

Sachez que rien ne vous empêche de modifier les images ou le code si le coeur vous en dit, le tout étant disponible sous licence Creative Commons. De plus un PSD est fourni avec les images, plutôt pratique.

Vous pouvez voir le script en action ici et le télécharger ici.