Discussion :

[boboss123]

Bonjour,

Je dois mettre à jour une table toutes les secondes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
var $table;
function createLine(jsonLine){
	return '<tr>' +
		'<td>' + jsonLine.x + '</td>' +
		'<td>' + jsonLine.y + '</td>' +
		'<td>' + jsonLine.z + '</td>' +
	'</tr>';
}
function createBody(jsonTab){
	var tbody = '<tbody>';
 
	var i;
	for(i=0; i<jsonTab.length; i++){
		tbody += createLine(jsonTab[i]);
	}
 
	return tbody += '</tbody>';
}
function createTable(jsonTab){
	var tab =
		'<table class="table table-striped table-bordered table-hover">' +
			'<thead>' +
				'<tr>' +
					'<th>X</th>' +
					'<th>Y</th>' +
					'<th>Z</th>' +					
				'</tr>' +
			'</thead>';
 
	return tab += createBody(jsonTab) + '</table>';
}
function successMain(jsonVar){
	var tableName = "tutu";
 
	if(!$table){
		$("#" + tableName).html(createTable(jsonVar.table));
		$table = $("#" + table + " table");
	} else {
		$table.find("tbody").replaceWith(createBody(jsonVar.table))
	}
 
}

Est-ce que vous auriez fait comme ça, où il y a des méthodes mieux pensées ?

Merci d'avance,

[NoSmoking]

Bonjour,
la re/construction d'une TABLE est une des opérations les plus gourmandes pour un navigateur.

Pourquoi reconstruire le DOM, qui plus est toutes les secondes, quand la modification des textContent/innerText peut être suffisante.

Sur base de cette structure

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table id="ma_table" border>
  <tr>
    <td>Lig 1 Col 1</td>
    <td>Lig 1 Col 2</td>
    <td>Lig 1 Col 3</td>
  </tr>
  <tr>
    <td>Lig 2 Col 1</td>
    <td>Lig 2 Col 2</td>
    <td>Lig 2 Col 3</td>
  </tr>
  <tr>
    <td>Lig 3 Col 1</td>
    <td>Lig 3 Col 2</td>
    <td>Lig 3 Col 3</td>
  </tr>
</table>

et avec les données suivantes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var  data =[
  {
    'nom': 'un_nom',
    'prenom':'un_prenom',
    'age': 'un_age'
  },
  {
    'nom': 'deux_nom',
    'prenom':'deux_prenom',
    'age': 'deux_age'
  },
  {
    'nom': 'trois_nom',
    'prenom':'trois_prenom',
    'age': 'trois_age'
  }
];

une reconstitution du type, pour exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
// Récupération de la TABLE
var oTable = document.getElementById('ma_table');
// Récupération des TD contenues dans la TABLE
var oTDs = oTable.getElementsByTagName('TD');
// Affectation des datas
for( var i=0; i < data.length; i++){
  oTDs[i*3 +0].textContent = data[i].nom;
  oTDs[i*3 +1].textContent = data[i].prenom;
  oTDs[i*3 +2].textContent = data[i].age;
}

me parait plus opportune, il te faudrait bien sûr que le nombre de contenants corresponde au nombre de contenus.

[boboss123]

oki merci

Dans mon tableau, j'aurais peut etre des fusion de case
=> donc il faut définir de ID lors de la construction du tableau ?

S'il y a un grand nombre de données à rafraichir, il n'y a pas de risque de voir les valeur ne pas se rafraichir en même temps (ce qui risque de faire un peu moche) ?

[NoSmoking]

Dans mon tableau, j'aurais peut etre des fusion de case
=> donc il faut définir de ID lors de la construction du tableau ?

pas forcément cela peut se gérer avec un index dans les datas par exemple.

S'il y a un grand nombre de données à rafraichir, il n'y a pas de risque de voir les valeur ne pas se rafraichir en même temps

il faudrait tester sur un grand nombre, mais qu'est ce qu'un grand nombre, mais la reconstruction est toujours très gourmande quoiqu'il arrive.

Tu peux également regarder le Petit guide du templating client concernant les templates.

[boboss123]

ok merci