Mon script pour mettre à jour une table : qu'en pensez vous ?

Version imprimable

Bonjour,

Je dois mettre à jour une table toutes les secondes

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
 
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,

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:

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:

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:

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.

03/08/2015, 15h23
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) ?
03/08/2015, 17h57
NoSmoking

Citation:

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.

Citation:

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.
04/08/2015, 08h21
boboss123

ok merci