Discussion :

[hapalemur]

Bjr,
J'ai un tableau de 5 lignes 7 colonnes :

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
18
    <table id="tab"  style="width:600px;height:250px" title="Supervision Data" >
        <thead>
            <tr>
                <th id="al1" width="80">AL-1</th>
                <th id="al2" width="80">AL-2</th>
                <th id="al3" width="80" align="right">AL-3</th>
                <th id="puv" width="80" align="right">Pu-V</th>
                <th id="puu" width="80">Pu-U</th>
                <th id="temp" width="80" align="center">Temp</th>
                <th id="secteur" width="100" align="center">Secteur</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>12.0</td>
                <td>13.0</td>
.....
        </tbody>

Toutes les x secondes, une requête Ajax me permet de récupérer une ligne au format JSON :

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
 
function callWebService(callbackRes) { // ici callbackRes : updateRow()
    var data = {}
    data["method"] = "getrow";
    $.ajax({
        ....
        data : data,
        complete : function(xhr, result){
            if (result != "success") {
                alert("Alerte != success");
            } else {
                console.log("Retour WS: xhr = " + xhr.responseText);
                callbackRes((jQuery.parseJSON(xhr.responseText)).resultat);
            }
        }
    });
}

Et le format du fichier JSON récupéré :

Code :

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

xhr = {"resultat":{"al1:"12.0","al2":"12.8","al3":"15.2","puv":"5.6","puu":"8.1","secteur":"absent","temp":"25"},"error":null,"exception":null}

Avec une fonction de callback updateRow() qui va faire le traitement pour la mise à jour du tableau.

La ligne obtenue est insérée en fin de tableau à la 5ème ligne: pour ce faire avant l'insertion, la 1ère ligne est supprimée et les lignes 2 à 5 sont translatées d'une unité vers le haut du tableau.
D'où mes questions :

1. pour ces manipulations sur une table, faut-il passer par un plugin (jqxgrid/flexigrid) ou jQuery permet-il de le faire directement?
2. comment récupérer une ligne de la table?
3. Comment affecter le retour Ajax à la 5ème ligne?

Merci de m'indiquer des pistes afin que j'évite de me fourvoyer.

[SpaceFrog]

les plugins dataTable jqgrid et autres reclament en retour d''ajax un json formaté il suffit de suivre les tutos ou la doc des plugins ...

sinon tu peux boucler avec un $.each sur le json pour peupler ton tableau

[hapalemur]

Bon, merci des précisions; et pour faire quelques manipulations basiques sur les lignes d'une table, j'ai rechigné à mettre en place un plugin de jQuery.
Je suis parvenu à cette solution http://jsfiddle.net/56yfw7rj/2/

Ce qui donne dans mon application la fonction de callBack pour le traitement du retour JSON:

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
function tmResult(/*JsonString*/ res) {
    var table = $("#mytable");
    // suppression 1ère ligne
    if (nbrows == 5){
        $("tr:eq(1)").remove();
        nbrows = 4;
    }
    // ajout de la dernière ligne
    var lastRow = $("<tr/>").appendTo(table.find('tbody:last'));
    nbrows += 1;
 
    var tRow = "";
    var lineArray = new Array();
    $.each(res, function (key, value) {
        // remise des champs dans l'ordre
        switch(key) {
            case "timestamp" : lineArray[0] = value;
                break;
            case "alimvhf1" : lineArray[1] = value;
                break;
            case "alimvhf2" : lineArray[2] = value;
                break;
            case "alimuhf" : lineArray[3] = value;
                break;
            case "pvhf" : lineArray[4] = value;
                break;
            case "puhf" : lineArray[5] = value;
                break;
            case "tempcav" : lineArray[6] = value;
                break;
            case "secteur" : lineArray[7] = value;
                break;
            case "porte" : lineArray[8] = value;
                break;
            default : break;
        }
    });
    for (i=0; i<9; i++){
        tRow += "<td>" + lineArray[i] + "</td>";
    }
    lastRow.append(tRow);
}

Le parcours du fichier JSON est un peu lourd, mais celà vient du fait que le serveur ne donne pas le résultat dans l'ordre des colonnes de la table :

Code :

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

{"champ1":"valeur1", "champ4":"valeur4", "champ5":"valeur5", "champ2":"valeur2", .....}

Et sur le serveur :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
            js.object()
                .key("timestamp").value(sdf.format(date))
                .key("alimvhf1").value(this.getAlim1VHF())
                .key("alimvhf2").value(this.getAlim2VHF())
                .key("alimuhf").value(this.getAlim3UHF())
                .key("pvhf").value(this.getPuissanceVHF())
                .key("puhf").value(this.getPuissanceUHF())
                .key("tempcav").value(this.getTemperatureCavites())
                .key("secteur").value(this.getPresenceSecteur())
                .key("porte").value(this.getDetectionPorte())
            .endObject();

Soit il y a une façon plus simple de procéder avec jQuery pour manipuler le fichier JSON retourné, soit je dois surcharger la méthode toString() de l'objet JSON sur le serveur, ce qui me semble la manière la + élégante de faire.