thead fixed / tbody scroll v2

**rlelamer** · 09/11/2018, 13h32

Bonjour,
Je cherche à reproduire un thead fixe et un tbody scrollable.
Sauf que l'architecture est complètement différente de la dernière fois et je m'y perds ...

dashboard.js

Code JS :

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
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
 
[...]
    var tableHeader =  '<tr>'
        + '<th>' + 'Time' + '</th>'
        + commonHeaders()
        + '<th title="Reported speed">' + 'vR (kn)' + '</th>'
        + '<th title="Calculated speed (Δd/Δt)">' + 'vC (kn)' + '</th>'
        + '<th title="Polar-derived speed">' + 'vT (kn)' + '</th>'
        + '<th title="Foiling factor">' + 'Foils' + '</th>'
        + '<th title="Calculated distance">' + 'Δd (nm)' + '</th>'
        + '<th title="Time between positions">' + 'Δt (s)' + '</th>'
        + '<th title="Sail change time remaining">' + 'Sail' + '</th>'
        + '<th title="Gybing time remaining">' + 'Gybe' + '</th>'
        + '<th title="Tacking time remaining">' + 'Tack' + '</th>'
        + '</tr>';
 
    function friendListHeader() {
        return '<tr>'
            + genth("th_rt","RT","Call Router",sortField == 'none', undefined)
            + genth("th_name","Friend/Opponent",undefined, sortField == 'displayName', currentSortOrder) 
            + genth("th_lu","Last Update",undefined)
            + genth("th_rank","Rank",undefined, sortField == 'rank', currentSortOrder)
            + genth("th_dtf","DTF","Distance to Finish",sortField == 'distanceToEnd', currentSortOrder)
            + genth("th_dtu","DTU","Distance to Us",sortField == 'distanceToUs', currentSortOrder) 
            + genth("th_brg","BRG","Bearing from Us", undefined)
            + genth("th_sail","Sail",undefined)
            + genth("th_state","State",undefined, sortField == 'state', currentSortOrder) 
            + genth("th_psn","Position",undefined)
            + genth("th_hdg","HDG","Heading", sortField == 'heading', currentSortOrder)
            + genth("th_twa","TWA","True Wind Angle", sortField == 'twa', currentSortOrder)
            + genth("th_tws","TWS","True Wind Speed",sortField == 'tws', currentSortOrder) 
            + genth("th_speed","Speed","Boat Speed",sortField == 'speed', currentSortOrder) 
            +  '</tr>';
    }
 
    function genth(id,content,title,sortfield,sortmark) {
        if(sortfield && sortmark != undefined) {
            content = content + " " + (sortmark ? '&#x25b2;' : '&#x25bc;');
        }
        return "<th id='" + id + "'"
            + (sortfield? " style='color:BlueViolet;'" : "")
            + (title ? (" title='" + title + "'") : "")
            + ">" + content + "</th>";
    }
 
    function commonHeaders() {
        return '<th>' + 'Rank' + '</th>'
            + '<th title="Distance To Leader">' + 'DTL' + '</th>'
            + '<th title="Distance To Finish">' + 'DTF' + '</th>'
            + '<th>' + 'Position' + '</th>'
            + '<th title="Heading">' + 'HDG' + '</th>'
            + '<th title="True Wind Angle">' + 'TWA' + '</th>'
            + '<th title="True Wind Speed">' + 'TWS' + '</th>'
            + '<th title="True Wind Direction"> ' + 'TWD' + '</th>'
            + '<th title="Auto TWA activated">' + 'aTWA' + '</th>'
            + '<th title="Auto Sail time remaining">' + 'aSail' + '</th>';
    }
 
    function makeFriendsHTML(rf) {
        var field = "speed";
        if (rf === undefined) {
            return "No friend positions received yet";
        } else {
            sortFriends(rf);
            return '<table style=\"width:100%\">'
                + friendListHeader()
                + Array.from(rf.table||[]).map(makeFriendListLine, rf).join(' ');
                + '</table>';
        }
    }
 
    function makeTableHTML (r) {
        return '<table style="width:100%">'
            + tableHeader
            + (r === undefined?"":r.tableLines.join(' '))
            + '</table>';
    }
[...]

J'ai tenté la méthode avec "position: sticky", ce qui me donne ceci :
dashboard.js

Code JS :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
[...]
    var tableHeader =  '<thead class="sticky"><tr>'
        + '<th>' + 'Time' + '</th>'
        + commonHeaders()
        + '<th title="Reported speed">' + 'vR (kn)' + '</th>'
        + '<th title="Calculated speed (Δd/Δt)">' + 'vC (kn)' + '</th>'
        + '<th title="Polar-derived speed">' + 'vT (kn)' + '</th>'
        + '<th title="Foiling factor">' + 'Foils' + '</th>'
        + '<th title="Calculated distance">' + 'Δd (nm)' + '</th>'
        + '<th title="Time between positions">' + 'Δt (s)' + '</th>'
        + '<th title="Sail change time remaining">' + 'Sail' + '</th>'
        + '<th title="Gybing time remaining">' + 'Gybe' + '</th>'
        + '<th title="Tacking time remaining">' + 'Tack' + '</th>'
        + '</thead></tr>';
 
    function friendListHeader() {
        return '<thead class="sticky"><tr>'
            + genth("th_rt","RT","Call Router",sortField == 'none', undefined)
            + genth("th_name","Friend/Opponent",undefined, sortField == 'displayName', currentSortOrder) 
            + genth("th_lu","Last Update",undefined)
            + genth("th_rank","Rank",undefined, sortField == 'rank', currentSortOrder)
            + genth("th_dtf","DTF","Distance to Finish",sortField == 'distanceToEnd', currentSortOrder)
            + genth("th_dtu","DTU","Distance to Us",sortField == 'distanceToUs', currentSortOrder) 
            + genth("th_brg","BRG","Bearing from Us", undefined)
            + genth("th_sail","Sail",undefined)
            + genth("th_state","State",undefined, sortField == 'state', currentSortOrder) 
            + genth("th_psn","Position",undefined)
            + genth("th_hdg","HDG","Heading", sortField == 'heading', currentSortOrder)
            + genth("th_twa","TWA","True Wind Angle", sortField == 'twa', currentSortOrder)
            + genth("th_tws","TWS","True Wind Speed",sortField == 'tws', currentSortOrder) 
            + genth("th_speed","Speed","Boat Speed",sortField == 'speed', currentSortOrder) 
            +  '</thead></tr>';
    }
 
    function makeFriendsHTML(rf) {
        var field = "speed";
        if (rf === undefined) {
            return "No friend positions received yet";
        } else {
            sortFriends(rf);
            return '<table style=\"width:100%\">'
                + friendListHeader()
                + '<tbody>'
                + Array.from(rf.table||[]).map(makeFriendListLine, rf).join(' ');
                + '</tbody>'
                + '</table>';
        }
    }
 
    function makeTableHTML (r) {
        return '<table style="width:100%">'
            + tableHeader
            + '<tbody>'
            + (r === undefined?"":r.tableLines.join(' '))
            + '</tbody>'
            + '</table>';
    }
[...]

style.css

Code CSS :

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

1
2
3
4
5
6
7
thead.sticky th {
    position: sticky;
    top: 0; 
    background-color: white;
    outline: 1px solid black;
    outline-offset: -1px;
}

Sans outline et outline-offset je perds la bordure lors du scroll, avec je me retrouve avec quelque chose en gras horrible ...

J'ai essayé une autre méthode avec display: block et une classe sur table mais le rendu est encore pire.

Je m'y prends mal surement ... vous aborderiez ça de quelle manière ?

Merci

Invité · 09/11/2018, 14h02

Bonjour,

On t'a fourni un script qui fonctionne.

A toi d'adapter la structure HTML de ta table.

**rlelamer** · 09/11/2018, 14h06

Bonjour jreaux62,
Ok j'vais essayer d'adapter ça.
J'voyais ça moins complexe que la fois dernière puisqu'il n'a à pas de redimensionnement et me disait qu'il était possible d'utiliser une méthode plus "classique".
Merci

Invité · 09/11/2018, 14h15

Sinon, en cherchant un peu (encore!) :

https://codepen.io/yavuzselim/pen/LNYrBd
Ou les liens déjà donnés ici.

Mais bon.
Tu ne vas pas changer de script à chaque fois que tu changes de slip...

[EDIT] J'ai retrouvé mon script (v3) : https://codepen.io/jreaux62/pen/eLoOKM
(tu as de la chance, hier j'ai effacé plusieurs de mes codepen... dont les v1 et v2...)

La structure de la table doit être :

Code html :

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

1
2
3
4
5
6
  <div class="table-wrap table-thead-fixed" data-nbreligne="12">
    <table>
      <thead>...</thead>
      <tbody>...</tbody>
    </table>
  </div>

**rlelamer** · 09/11/2018, 14h54

Ok merci jreaux62.

Si je comprends bien les modifications doivent se faire uniquement dans ces 2 fonctions ?

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
function makeFriendsHTML(rf) {
    var field = "speed";
    if (rf === undefined) {
        return "No friend positions received yet";
    } else {
        sortFriends(rf);
        return '<table style=\"width:100%\">' +
            friendListHeader() +
            Array.from(rf.table || []).map(makeFriendListLine, rf).join(' '); +
        '</table>';
    }
}
 
function makeTableHTML(r) {
    return '<table style="width:100%">' +
        tableHeader +
        (r === undefined ? "" : r.tableLines.join(' ')) +
        '</table>';
}

Ou je suis encore à coté de la plaque ? ...

Invité · 09/11/2018, 14h58

1- Oui, à priori, il faut ajouter icicle <div> avec les bonnes classes.

2- Attention : dans le script précédent, on avait un id="pointsTable" sur le <tbody> !
Là, j'avoue qu'il va falloir se replonger dans le script...

"à priori" (toujours), il suffit de supprimer les lignes :

Code :

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

1
2
3
		// ----------
		// SPECIAL : on change l id "pointsTable" -> "pointsTable2"
		document.querySelector('.theader-fixed #pointsTable').id = 'pointsTable2';

(lignes qui furent ajoutées spécifiquement)

thead fixed / tbody scroll v2

JavaScript

Vue hybride

Discussions similaires

Partager

Partager