Mon gif animé s'arrête de fonctionner lors de l'envoi de la requete

Bonjour,


Tout est dit dans le titre.
Voici le lien ici
Dès que je bouge un curseur sur l'un des 14 slider control (dans le 1er pavé blanc).
j'affiche "Chargement" et une roulette (gif animé).
Cette roulette s'arrête de tourner.
Pourquoi ?
Pouvez-vous m'aider à résoudre ce problème ?
D'avance, un très grand merci.

En plus de l'affichage de la roulette dans le "sLoadingRecords" de la dataTables,
je souhaiterai aussi que le gif animé ("roulette.gif") s'affiche dans la "bloc2101",
à l'appel de la fonction "newrecherche()" et qu'il disparaisse à la sortie de cette même fonction.


Voici la fonction en question :

	function newrecherche() {
		url();
		oTable = $('#example').dataTable( {
			"bDestroy": true,
			"sScrollY": example,
//			"bPaginate": false,
			"bFilter": false,
			"bInfo": false,
//			"bScrollInfinite": true,
			"bScrollCollapse": true,
			"BJQueryUI" : false,
			"aoColumns": [
				{ "sTitle": "comparer",		"bSortable": false,
				"sClass": "alignCenter", 	"bVisible": true							},
				{ "sTitle": "forme",		"bSortable": true,
				"sClass": "alignLeft",    	"bVisible": true							},
				{ "sTitle": "carat",		"bSortable": true,
				"sClass": "alignRight",  	"bVisible": true							},
				{ "sTitle": "taille",		"bSortable": true,
				"sClass": "alignCenter",  	"bVisible": true							},
				{ "sTitle": "couleur",		"bSortable": true,
				"sClass": "alignCenter",  	"bVisible": true							},
				{ "sTitle": "pureté",		"bSortable": true,
				"sClass": "alignCenter",  	"bVisible": true							},
				{ "sTitle": "poli",			"bSortable": true,
				"sClass": "alignCenter",	"bVisible":	(swColonne[11]==1)?true:false	},
				{ "sTitle": "symétrie",		"bSortable": true,
				"sClass": "alignCenter", 	"bVisible":	(swColonne[12]==1)?true:false	},
				{ "sTitle": "prof.",		"bSortable": true,
				"sClass": "alignRight",  	"bVisible":	(swColonne[13]==1)?true:false	},
				{ "sTitle": "table",		"bSortable": true,
				"sClass": "alignRight",  	"bVisible":	(swColonne[14]==1)?true:false	},
				{ "sTitle": "fluorescence",	"bSortable": true,
				"sClass": "alignCenter", 	"bVisible":	(swColonne[15]==1)?true:false	},
				{ "sTitle": "prix/ct",		"bSortable": true,
				"sClass": "alignRight",  	"bVisible":	(swColonne[16]==1)?true:false	},
				{ "sTitle": "colette",		"bSortable": true,
				"sClass": "alignCenter", 	"bVisible":	(swColonne[17]==1)?true:false	},
				{ "sTitle": "Lg/lg",		"bSortable": true,
				"sClass": "alignRight",  	"bVisible":	(swColonne[18]==1)?true:false	},
				{ "sTitle": "délai",		"bSortable": true,
				"sClass": "alignRight",  	"bVisible": true							},
				{ "sTitle": "certificat",	"bSortable": true,
				"sClass": "alignCenter",  	"bVisible": true							},
				{ "sTitle": "prix",			"bSortable": true,
				"sClass": "alignRight",  	"bVisible": true							},
				{ "sTitle": "détail",		"bSortable": false,
				"sClass": "alignLeft",  	"bVisible": true							}
			],
			"sAjaxSource": "js/dt/chargementdata00.php" + argurl,
			"bDeferRender": true,
			"bServerSide": true,
			"sDom": "frtiS",
			"oScroller": {
				"loadingIndicator": true
			},
			"oLanguage": {
				"sLoadingRecords": "<img src='images/general/roulette.gif' width='16' height='16'>&nbsp;&nbsp;Chargement en cours...",
				"sZeroRecords":  "Aucun diamant n'a pu être trouvé !"
			},
			"sScrollX": "100%",
			"sScrollXInner": coef,
			"fnServerData": function ( sSource, aoData, fnCallback ) {
				aoData.push( { "name": "more_data", "value": "my_value" } );
				$.getJSON( sSource, aoData, function (json) {
					maxref = json.iTotalRecords;
					triref = json.iTotalDisplayRecords;
					nbreference();
					fnCallback(json);
				} );
        	},
			"fnInitComplete": function() {

			},
       		"aaSorting": [[ 16, "asc" ]]
		} );
		$(".dataTables_scrollBody").height(example);
		$(".dataTables_scrollHead").height("25px");
	}

Voici le code HTML (où je souhaiterai que cette roulette s'affiche) :

        <div id="bloc20">
        	<div id="bloc21">
                <div class="part01" id="bloc2101">Chargement <img src="images/general/roulette.gif" width="32" height="32" alt="chargement_en_cours"></div>
                <div class="part02" style="padding-top:25px; text-align:right;"><span class="curseur" onClick="pageComparer();">&nbsp;Comparer&nbsp;<img src="images/general/loupeblanche.gif" width="14" height="15" alt="recherche">&nbsp;</span></div>
                <div style="clear:left;"></div>
            </div>
            <div style="clear:left;"></div>
        </div>

Modifié par jytest (23 May 2013 - 17:31)