DataTables très lent avec requête ajax et propriété "bvisible" variable

Version imprimable

28/09/2013, 00h14
jytest

DataTables très lent avec requête ajax et propriété "bvisible" variable

Bonjour à tous,

J'ai un énorme souci !
Le premier chargement de page est rapide.
Par contre, quand je bouge le moindre curseur de l'un oul'autre slider control,
on dirait que la nouvelle recherche a une inertie de près de 5 secondes...
C'est énorme !!! C'est frustrant !!! C'est insupportable !!!

Le problème ne viendrait pas du serveur...
J'ai le même souci sur un autre !!!

Pouvez-vous m'aider à supprimer cette inertie ?

D'avance, je vous en remercie.
Bon weekend à tous.
28/09/2013, 09h00
jytest

J'ajoute des infos.

D'autant plus bizarre que Firebug me signale par le XHR,
que la requête dure moins de 1 sec...
Les 7 sec d'attente viendraient donc du datatables
quand il doit afficher le fichier JSON.

Mais à ce point-ci, j'aurais besoin de vous...
car je ne sais plus quoi faire pour solutionner mon problème...

Je crois que je viens de trouver ENFIN mon erreur en employant :
http://jsonlint.com/

Voici mon message d'erreur :
http://creaprint.be/bugJSON.JPG

Je vous joins ci-dessous le code qui fabrique le JSON :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
 <?php
	session_start();
 
	$nbcomparer = 0;
	if (isset($_SESSION['recherche'])) {
		if ($_SESSION['recherche']['stringcomparer'] != "") {
			unset($refcomparer);
			$refcomparer = explode(":", $_SESSION['recherche']['stringcomparer']);
			$nbcomparer = count($refcomparer);
		}
	}
 
	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	 * libell&eacute;s types
	 */
	$libelle = array();
	$libelle[1] = array ("", "Rond", "Princesse", "Emeraude", "Radiant", "Ovale", "Poire", "Marquise", "Coeur", "Asscher CS");
	$libelle[4] = array ("D", "E", "F", "G", "H", "I", "J", "K");
	$libelle[3] = array ("Faible", "Bon", "Très bon", "Excellent", "Idéal");
	$libelle[5] = array ("IF", "VVS1", "VVS2", "VS1", "VS2", "SI1", "SI2", "SI3", "I1");
	$libelle[6] = array ("Faible", "Bon", "Très bon", "Excellent", "Idéal");
	$libelle[7] = array ("Faible", "Bon", "Très bon", "Excellent", "Idéal");
	$libelle[10] = array ("Sans", "Très légère", "Légère", "Faible", "Moyenne", "Forte", "Très forte");
	$libelle[12]  = array ("Pointue", "Très petite", "Petite", "Moyenne", "Large");
	$libelle[15]  = array ("", "GIA", "HRD", "IGI", "EGL", "AGS");
 
	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	 * Easy set variables
	 */
 
	/* Array of database columns which should be read and sent back to DataTables. Use a space where
	 * you want to insert a non-database field (for example a counter or static image)
	 */
	$aColumns = array();
	$aColumns [] = 'item_id';				/* 00					*/
	$aColumns [] = 'cut';					/* 01					*/
	$aColumns [] = 'carat';					/* 02					*/
	$aColumns [] = 'cut_grade';				/* 03					*/
	$aColumns [] = 'color';					/* 04					*/
	$aColumns [] = 'clarity';				/* 05					*/
	$aColumns [] = 'polish';				/* 06	option11		*/
	$aColumns [] = 'symmetry';				/* 07	option12		*/
	$aColumns [] = 'depth';					/* 08	option13		*/
	$aColumns [] = 'table'; 				/* 09	option14		*/
	$aColumns [] = 'fluo_intensity';		/* 10	option15		*/
	$aColumns [] = 'price_per_carat_ht';	/* 11	option16		*/
	$aColumns [] = 'culet_size';			/* 12	option17		*/
	$aColumns [] = 'length_width';			/* 13	option18		*/
	$aColumns [] = 'delay';					/* 14					*/
	$aColumns [] = 'certificat';			/* 15					*/
	$aColumns [] = 'total_price_ht';		/* 16					*/
	$aColumns [] = 'item_id';				/* 17					*/
 
	/* Indexed column (used for fast and accurate table cardinality) */
	$sIndexColumn = "item_id";
 
	/* DB table to use */
	$sTable = "diamant_data";
 
	/* Database connection information */
	$gaSql['user']       = "***";
	$gaSql['password']   = "***";
	$gaSql['db']         = "***";
	$gaSql['server']     = "***";
 
 
	/* 
	 * MySQL connection
	 */
	$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'] );
 
	mysql_set_charset( 'utf8' ); 	
 
 
	/* 
	 * Paging
	 */
	$sLimit = "";
	if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
	{
		$sLimit = "LIMIT ".intval( $_GET['iDisplayStart'] ).", ".
			intval( $_GET['iDisplayLength'] );
	}
 
 
	/*
	 * Ordering
	 */
	$sOrder = "";
	if ( isset( $_GET['iSortCol_0'] ) )
	{
		$sOrder = "ORDER BY  ";
		for ( $i=0 ; $i<intval( $_GET['iSortingCols'] ) ; $i++ )
		{
			if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
			{
				$sOrder .= "`".$aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."` ".
					($_GET['sSortDir_'.$i]==='asc' ? 'asc' : 'desc') .", ";
			}
		}
 
		$sOrder = substr_replace( $sOrder, "", -2 );
		if ( $sOrder == "ORDER BY" )
		{
			$sOrder = "";
		}
	}
 
 
	/* 
	 * Filtering
	 * NOTE this does not match the built-in DataTables filtering which does it
	 * word by word on any field. It's possible to do here, but concerned about efficiency
	 * on very large tables, and MySQL's regex functionality is very limited
	 */
	$sWhere = "";
	if ( $_GET['sSearch'] != "" )
	{
		$sWhere = "(";
		$aWords = preg_split('/\s+/', $_GET['sSearch']);
		for ( $j=0 ; $j<count($aWords) ; $j++ )
		{
			if ( $aWords[$j] != "" )
			{
				$sWhere .= "(";
				for ( $i=0 ; $i<count($aColumns) ; $i++ )
				{
					$sWhere .= "`".$aColumns[$i]."` LIKE '%".mysql_real_escape_string( $aWords[$j] )."%' OR ";
				}
				$sWhere = substr_replace( $sWhere, "", -3 );
				$sWhere .= ") AND ";
			}
		}
 
		$sWhere = substr_replace( $sWhere, "", -5 );
		$sWhere .= ")";
	}
 
	/* Individual column filtering */
	$sColumnWhere = "";
	for ( $i=0 ; $i<count($aColumns) ; $i++ )
	{	
		if ( $_GET['sSearch_'.$i] != "" )
		{
			$aWords = preg_split('/\s+/', $_GET['sSearch_'.$i]);
			$sColumnWhere .= "(";
			for ( $j=0 ; $j<count($aWords) ; $j++ )
			{
				if ( $aWords[$j] != "" )
				{
					$sColumnWhere .= "`".$aColumns[$i]."` = '".mysql_real_escape_string( $libelle[ $i ][ $aWords[$j] ] )."' OR ";
				}
			}
			$sColumnWhere = substr_replace( $sColumnWhere, "", -3 );
			$sColumnWhere .= ") AND ";
		}
		if ( $_GET['sStart_'.$i] != "" AND $_GET['sEnd_'.$i] != "" )
		{
			$sColumnWhere .= "(";
			$sColumnWhere .= "`".$aColumns[$i]."` >= '".mysql_real_escape_string( $_GET['sStart_'.$i] )."' AND `".$aColumns[$i]."` <= '".mysql_real_escape_string( $_GET['sEnd_'.$i] )."' ";
			$sColumnWhere .= ") AND ";
		}
	}
 
	if ( $sColumnWhere != "" ) {
		$sColumnWhere = substr_replace( $sColumnWhere, "", -5 );
		if ( $sWhere == "" ) {
			$sWhere = $sColumnWhere;
		} else {
			$sWhere .= " AND ".$sColumnWhere;
		}
	}
 
	if ( $sWhere != "" )
	{
		$sWhere = "WHERE ".$sWhere;
	}
 
 
	/*
	 * SQL queries
	 * Get data to display
	 */
	$sQuery = "
	 SELECT SQL_CALC_FOUND_ROWS `".str_replace(" , ", " ", implode("`, `", $aColumns))."` 
		FROM   $sTable
		$sWhere
		$sOrder
		$sLimit
		";
	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
 
	/* Data set length after filtering */
	$sQuery = "
		SELECT FOUND_ROWS()
	";
	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
	$iFilteredTotal = $aResultFilterTotal[0];
 
	/* Total data set length */
	$sQuery = "
		SELECT COUNT(`".$sIndexColumn."`)
		FROM   $sTable
	";
	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
	$aResultTotal = mysql_fetch_array($rResultTotal);
	$iTotal = $aResultTotal[0];
 
 
	/*
	 * Output
	 */
	$output = array(
		"sEcho" => intval($_GET['sEcho']),
		"iTotalRecords" => $iTotal,
		"iTotalDisplayRecords" => $iFilteredTotal,
		"aaData" => array()
	);
 
	while ( $aRow = mysql_fetch_array( $rResult ) )
	{
				$on=0;
				$comparer = trim($aRow[ 'item_id' ]);
				if ($nbcomparer > 0) {
					for ($krow=0; $krow<$nbcomparer; $krow++) {
						if ($refcomparer[$krow] == $comparer) {
							array_splice($refcomparer,$krow,1);
							$nbcomparer--;
							$on=1;
							break;
						}
					}
				}
				$row = array();
				$row[] = "<div id='tag".$comparer."'><input id='comparer[".$comparer."]' type='checkbox' class='curseur' onclick='acomparer(".$comparer.");'"
				.($on==1?' CHECKED':'')."></div> ";
				$row[] = trim($aRow[ 'cut' ]);
				$inter = trim($aRow[ 'carat' ]);
				$row[] = number_format($inter, 2, ',', ' ');
				$row[] = trim($aRow[ 'cut_grade' ]);
				$row[] = trim($aRow[ 'color' ]);
				$row[] = trim($aRow[ 'clarity' ]);
				$row[] = trim($aRow[ 'polish' ]);
				$row[] = trim($aRow[ 'symmetry' ]);
				$inter = trim($aRow[ 'depth' ]);
				if (floatval($inter)>0) {
					$row[] = number_format($inter, 2, ',', ' ');
				} else {
					$row[] = "";
				}
				$inter = trim($aRow[ 'table' ]);
				if (floatval($inter)>0) {
					$row[] = number_format($inter, 2, ',', ' ');
				} else {
					$row[] = "";
				}
				$row[] = trim($aRow[ 'fluo_intensity' ]);
				$inter = trim($aRow[ 'price_per_carat_ht' ]);
				$row[] = number_format($inter, 0, ',', ' ');
				$row[] = trim($aRow[ 'culet_size' ]);
				$inter = trim($aRow[ 'length_width' ]);
				if (floatval($inter)>0) {
					$row[] = number_format($inter, 2, ',', ' ');
				} else {
					$row[] = "";
				}
				$inter = trim($aRow[ 'delay' ]);
				if (floatval($inter) == 0) {
					$row[] = "nc";
				}
				if (floatval($inter) == 1) {
					$row[] = $inter." jour";
				}
				if (floatval($inter) > 1) {
					$row[] = $inter." jours";
				}
				$row[] = trim($aRow[ 'certificat' ]);
				$inter = trim($aRow[ 'total_price_ht' ]);
				$row[] = number_format($inter, 0, ',', ' ');
				$row[] = "<a href='javascript:envoiDetails(".trim($aRow[ 'item_id' ]).",\"".trim($aRow[ 'cut' ])."\",".trim($aRow[ 'carat' ]).");'><span class='voir'>D&eacute;tails</span></a>";
				$output['aaData'][] = $row;
	}
	echo json_encode( $output );
?>

28/09/2013, 10h30
danielhagnoul

Bonjour

De l'aide pour un fichier PHP qui génère un JSON ? Je vous conseille le forum PHP avec un titre de discussion plus approprié.

C'est ceci qui cause les 5 secondes d'attente :

Erreur :
C'est la propriété "bvisible"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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&eacute;","bSortable": true,"sClass":"alignCenter","bVisible": true},
		{ "sTitle": "poli","bSortable": true,"sClass": "alignCenter","bVisible":	(swColonne[11]==1)?true:false},
		{ "sTitle": "sym&eacute;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&eacute;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&eacute;tail","bSortable": false,"sClass": "alignLeft","bVisible": true}
	],
	"sAjaxSource": "diamants/js/dt/chargementdata00.php" + argurl,
	"bDeferRender": true,
	"bServerSide": true,
	"sDom": "frtiS",
	"oScroller": {
		"loadingIndicator": true
	},
	"oLanguage": {
		"sLoadingRecords": "<img src='diamants/images/general/roulette.gif' width='16' height='16'>&nbsp;&nbsp;Chargement en cours...",
		"sZeroRecords":  "Aucun diamant n'a pu &ecirc;tre trouv&eacute; !"
	},
	"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" ]]
} ).fnDraw;

28/09/2013, 14h34
jytest

Je viens de mieux localiser le "fautif".

C'est plus exactement cette fonction
fnCallback(json);
qui ralentit tout !!!
C'est une fonction propre au dataTables !!!

Et plus précisément :
C'est la propriété "bvisible"

Pouvez-vous m'aider ?

J'ai TROUvé le pourquoi !!!!
J'ai besoin de vous pour trouver la SOLUTION !!!
Aidez-moi, svp !!!

C'est ici que "la lenteur" s'effectue :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"sClass": "alignCenter",		"bVisible":	(swColonne[11]==1)?true:false	},
{ "sTitle": "sym&eacute;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&eacute;lai",		"bSortable": true,

Je m'explique...
Si je mets :
"bvisible": { (swColonne[xx]==1)?true;true" }...
Tout s'accélère, comme par magie !!!

Dès lors,
comment solutionner ce truc ?
J'ai absolument besoin de ces tests ternaires !

28/09/2013, 16h04
jytest

Je vais même plus loin, après avoir effectuer des tests.
Ce n'est pas le test ternaire qui fait perdre mes 5 secondes,
mais simplement, le fait de mettre la propriété "bVisible" à "false" !!!

C'est ici que mes compétences s'arrêtent...
Je n'y connais rien en jquery, pour aller "fouiller" dans le code du "dataTables" !

Pouvez-vous m'aider ?

Pour isoler le tableau allant dans la propriété "aoColumns",
j'ai essayé comme ceci.

Mais ce code javascript ne fonctionne pas !
Pourquoi ? Bizarre !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
		var persoVisible =  array [
			{ '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&eacute;',	'bSortable': true,
			'sClass': 'alignCenter',  		'bVisible': true							},
			{ 'sTitle': 'poli',				'bSortable': true,
			'sClass': 'alignCenter',		'bVisible':	(swColonne[11]==1)?true:true	},
			{ 'sTitle': 'sym&eacute;trie',	'bSortable': true,
			'sClass': 'alignCenter', 		'bVisible':	(swColonne[12]==1)?true:true	},
			{ 'sTitle': 'prof.',			'bSortable': true,
			'sClass': 'alignRight',  		'bVisible':	(swColonne[13]==1)?true:true	},
			{ 'sTitle': 'table',			'bSortable': true,
			'sClass': 'alignRight',  		'bVisible':	(swColonne[14]==1)?true:true	},
			{ 'sTitle': 'fluorescence',		'bSortable': true,
			'sClass': 'alignCenter', 		'bVisible':	(swColonne[15]==1)?true:true	},
			{ 'sTitle': 'prix/ct',			'bSortable': true,
			'sClass': 'alignRight',  		'bVisible':	(swColonne[16]==1)?true:true	},
			{ 'sTitle': 'colette',			'bSortable': true,
			'sClass': 'alignCenter', 		'bVisible':	(swColonne[17]==1)?true:true	},
			{ 'sTitle': 'Lg/lg',			'bSortable': true,
			'sClass': 'alignRight',  		'bVisible':	(swColonne[18]==1)?true:true	},
			{ 'sTitle': 'd&eacute;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&eacute;tail',	'bSortable': false,
			'sClass': 'alignLeft',  		'bVisible': true							}
		];

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
	function newrecherche() {
		url();
		if (argurl != oldargurl) {
			oTable = $('#example').dataTable( {
				"bDestroy": true,
				"sScrollY": example,
//				"bPaginate": false,
				"bFilter": false,
				"bInfo": false,
//				"bScrollInfinite": true,
				"bScrollCollapse": true,
				"BJQueryUI" : false,
				"aoColumns": perso,
				"sAjaxSource": "diamants/js/dt/chargementdata00.php" + argurl,
				"bDeferRender": true,
				"bServerSide": true,
				"sDom": "frtiS",
				"oScroller": {
					"loadingIndicator": true
				},
				"oLanguage": {
					"sLoadingRecords": "<img src='diamants/images/general/roulette.gif' width='16' height='16'>&nbsp;&nbsp;Chargement en cours...",
					"sZeroRecords":  "Aucun diamant n'a pu &ecirc;tre trouv&eacute; !"
				},
				"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" ]]
			} ).fnDraw;
			$(".dataTables_scrollBody").height(example);
			$(".dataTables_scrollHead").height("25px");
		}
	}

Pouvez-vous m'aider à réaliser un tableau à réaliser

Bonsoir à tous,

Pouvez-vous m'aider à réaliser ce tableau javascript.
Je n'y arrive pas.
Il s'agit d'une variable à fournir à une propriété
d'un pluggin jquery.
Merci d'avance pour votre aide !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
		var persoVisible =  array [
			{ '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&eacute;',	'bSortable': true,
			'sClass': 'alignCenter',  		'bVisible': true							},
			{ 'sTitle': 'poli',				'bSortable': true,
			'sClass': 'alignCenter',		'bVisible':	(swColonne[11]==1)?true:true	},
			{ 'sTitle': 'sym&eacute;trie',	'bSortable': true,
			'sClass': 'alignCenter', 		'bVisible':	(swColonne[12]==1)?true:true	},
			{ 'sTitle': 'prof.',			'bSortable': true,
			'sClass': 'alignRight',  		'bVisible':	(swColonne[13]==1)?true:true	},
			{ 'sTitle': 'table',			'bSortable': true,
			'sClass': 'alignRight',  		'bVisible':	(swColonne[14]==1)?true:true	},
			{ 'sTitle': 'fluorescence',		'bSortable': true,
			'sClass': 'alignCenter', 		'bVisible':	(swColonne[15]==1)?true:true	},
			{ 'sTitle': 'prix/ct',			'bSortable': true,
			'sClass': 'alignRight',  		'bVisible':	(swColonne[16]==1)?true:true	},
			{ 'sTitle': 'colette',			'bSortable': true,
			'sClass': 'alignCenter', 		'bVisible':	(swColonne[17]==1)?true:true	},
			{ 'sTitle': 'Lg/lg',			'bSortable': true,
			'sClass': 'alignRight',  		'bVisible':	(swColonne[18]==1)?true:true	},
			{ 'sTitle': 'd&eacute;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&eacute;tail',	'bSortable': false,
			'sClass': 'alignLeft',  		'bVisible': true							}
		];
	alert (persoVisible);

J'ai essayé comme ceci, mais cela ne fonctionne pas...
Pourquoi ?Pouvez-vous m'aider ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var persoVisible =  new Array;
persoVisible[0] = new Array;
persoVisible[0][0] = { 'sTitle': 'comparer' };
persoVisible[0][1] = { 'bSortable': false };
persoVisible[0][2] = { 'sClass': 'alignCenter' };
persoVisible[0][3] = { 'bVisible': true };
persoVisible[1] = new Array;
persoVisible[1][0] = { 'sTitle': 'forme' };
persoVisible[1][1] = { 'bSortable': false };
persoVisible[1][2] = { 'sClass': 'alignLeft' };
persoVisible[1][3] = { 'bVisible': true };
...

Tout ceci va en fait dans une fonction :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
	function newrecherche() {
		url();
		if (argurl != oldargurl) {
			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&eacute;',	'bSortable': true,
					'sClass': 'alignCenter',  		'bVisible': true							},
					{ 'sTitle': 'poli',				'bSortable': true,
					'sClass': 'alignCenter',		'bVisible':	(swColonne[11]==1)?true:true	},
					{ 'sTitle': 'sym&eacute;trie',	'bSortable': true,
					'sClass': 'alignCenter', 		'bVisible':	(swColonne[12]==1)?true:true	},
					{ 'sTitle': 'prof.',			'bSortable': true,
					'sClass': 'alignRight',  		'bVisible':	(swColonne[13]==1)?true:true	},
					{ 'sTitle': 'table',			'bSortable': true,
					'sClass': 'alignRight',  		'bVisible':	(swColonne[14]==1)?true:true	},
					{ 'sTitle': 'fluorescence',		'bSortable': true,
					'sClass': 'alignCenter', 		'bVisible':	(swColonne[15]==1)?true:true	},
					{ 'sTitle': 'prix/ct',			'bSortable': true,
					'sClass': 'alignRight',  		'bVisible':	(swColonne[16]==1)?true:true	},
					{ 'sTitle': 'colette',			'bSortable': true,
					'sClass': 'alignCenter', 		'bVisible':	(swColonne[17]==1)?true:true	},
					{ 'sTitle': 'Lg/lg',			'bSortable': true,
					'sClass': 'alignRight',  		'bVisible':	(swColonne[18]==1)?true:true	},
					{ 'sTitle': 'd&eacute;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&eacute;tail',	'bSortable': false,
					'sClass': 'alignLeft',  		'bVisible': true							}
				],
				"sAjaxSource": "diamants/js/dt/chargementdata00.php" + argurl,
				"bDeferRender": true,
				"bServerSide": true,
				"sDom": "frtiS",
				"oScroller": {
					"loadingIndicator": true
				},
				"oLanguage": {
					"sLoadingRecords": "<img src='diamants/images/general/roulette.gif' width='16' height='16'>&nbsp;&nbsp;Chargement en cours...",
					"sZeroRecords":  "Aucun diamant n'a pu &ecirc;tre trouv&eacute; !"
				},
				"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" ]]
			} ).fnDraw;
			$(".dataTables_scrollBody").height(example);
			$(".dataTables_scrollHead").height("25px");
		}
	}

28/09/2013, 21h53
NoSmoking
Bonsoir,

Citation:

Mais ce code javascript ne fonctionne pas !

tu la sorts d'où cette syntaxe var persoVisible = array [

Citation:

"sClass": "alignRight", "bVisible": (swColonne[16]==1)?true:false }

un simple
Code:

1 2 "sClass": "alignRight", "bVisible":(swColonne[16]==1)}
est suffisant.
28/09/2013, 23h26
jytest

J'ai trouvé la solution avec un tableau pour la propriété bVisible.

Avec un peu de bidouilles,
j'ai pu éviter les "bVisible":false
qui ralentissent atrocement le jquery de dataTables !!!

Encore une précision.
Malgré le test à la moulinette du JSON ci-dessus,
je peux vous confirmer qu'il n'y avait pas d'erreur dans le fichier JSON !!!

Ouf !!! C'est fini !
29/09/2013, 10h04
danielhagnoul

Je ne connais pas assez datatables pour émettre un avis valable, mais on dirait bien qu'il traîne depuis longtemps un bogue non résolu sur "bVisible"

:google: https://www.google.be/search?q=datat...+bug&tbs=qdr:y
29/09/2013, 11h47
jytest

@danielhagnoul
Merci à toi...
Je devenais fou !!!
J'ai dû contourner le truc...
Merci !!!