Errore Datatables jQuery: Json Data from server could not be parsed

Vediamo come risolvere l’errore “Json Data from server could not be parsed” nello script jQuery datatables durante l’invio di dati in maniera asincrona.

Configurazione di Datatables per il caricamento asincrono dei dati

Dopo aver incluso le librerie datatables e jQuery usate questo codice per usare il caricamento asincrono dei dati da mettere nella vostra tabella:

$(document).ready(function(){

	   $('#lista').dataTable( {

			"bProcessing": true,

			"bDeferRender": true,

			"sAjaxSource": "file_elaborazione_dati.php",

            }); //fine datatable	

});//dom

Panoramica dell’errore

Il problema si presenta quando si vuole passare dei dati allo script jQuery Datatables (i dati usualmente sono popolati con PHP) in modo asincrono per velocizzare il caricamento degli elementi (essenziale nel caso di database di grosse dimensioni). Il problema (così come la risoluzione) va articolato in 3 step essenziali. Vediamo quali.

Risoluzione : step1

Aggiorna datatables e jQuery all’ultima versione disponibile. Ad oggi (Ottobre 2012), usate jQuery v1.8.2 e datatables 1.9.4.

Risoluzione: step2

Il problema nasce sopratutto quando si vuole popolare la tabella in modo dinamico con PHP. Molte volte, se non siete pratici di php potreste creare codice jSon obsoleto o errato. Il codice jSon prodotto da dare in pasto a datatables deve avere obbligatoriamente una struttura di questo tipo:

{ "aaData": [
	["Valore1","Valore2"],	
        ["Valore1","Valore2"],	
        ["Valore1","Valore2"],	
        ["Valore1","Valore2"],	
        ["Valore1","Valore2"]
]}

Da notare i doppi apici obbligatori dentro le quadre, e l’assenza (voluta) della virgola sull’ultimo elemento jSon.

Un buon metodo per “evitare grane” e errori di struttura grossolani è usare la funzione json_encode di php che crea un codice json correttamente formatatto e pronto da dare in pasto a datatables (e in generale ad altri script e funzioni). Ecco un codice di esempio per passare i dati di una tabella tramite json popolato tramite un semplice loop php.

include ("config.php");
include ("connessione_db.php"); 

	$dati = array();

	$q = $db->prepare("SELECT * FROM tuotabella");
	$q->execute();
	$q->setFetchMode(PDO::FETCH_ASSOC);
	while($el = $q->fetch()) { 

		$dati[] = array(utf8_encode($el['campo1']),$el['campo2']);

	}//while

  	$json_array = json_encode(array("aaData" =>  $dati  ));
	echo $json_array;

Ecco il codice spiegato brevemente:

Grazie al loop php per prima cosa creo un array “dati” che conterrà gli elementi che ci interessa visualizzare nella tabella di jQuery datatables.  Una volta recuperati i dati nell’array passo a json_encode un array di questo tipo:

array  associativo “aaData” (l’array con oggetto in json_encode equivale alla parentesi graffa). che associamo al nostro array “classico” recuperato del loop. In json l’array “standard” viene inserito con la parentesi quadra. Il risultato è esattamente la struttura che vogliamo passare a datatables ovvero:

{ "aaData": [
	["campo1","campo2"],
        ["campo1","campo2"],
        ["campo1","campo2"]
 ]}

Per maggiori informazioni (mi rendo conto che può essere difficile da capire, vi invito a visionare la documentazione di json_encode, in particolare l’esempio #2-

Risoluzione: step3

Talvolta i dati vengono passati con un encoding errato (capita spesso, se, come me, avete avuto a che fare con database molto vecchi o frutto di conversioni). E’ molto utile in questo caso usare il filtraggio del testo con utf8_encode di php.

Conclusioni

Grazie a questa risoluzione (che mi è costata circa 3 ore di tentativi xD) potete facilmente popolare la vostra tabella usando jQuery datatables  (il migliore script esistente per gestire le tabelle) in modo asincrono e ultra-veloce.

Hai delle domande sulla risoluzione del problema? Fammelo sapere nei commenti!