Scrollen door een tabel.
Ik haal data op en plaats die in een website. De data is zo veel dat je behoorlijk naar beneden moet scrollen om alles te zien. De header van de webpagina verdwijnt dus bovenaan van het scherm af.
Ik wil nu in de webpagina een kader waarin ik deze data plaats en alleen dat laat scrollen. De header en andere zaken blijven dan bestaan.
Wie kan me aan php-script helpen, waarmee ik zoiets kan bereiken?
Alvast bedankt.
p.s. misschien is er wel een voorbeeld of tutorial beschikbaar?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<style>
#mijn_div {
height: 300px;
overflow: auto;
}
</style>
...
<body>
...
<div id="mijn_div"> Lorem Ipsum ... </div>
...
</body>
#mijn_div {
height: 300px;
overflow: auto;
}
</style>
...
<body>
...
<div id="mijn_div"> Lorem Ipsum ... </div>
...
</body>
Het scrollen werkt, maar wat ik eigenlijk nog wil, is dat de header blijft staan en alleen de data scrolld. Als ik nu de <div> verplaats naar binnen de <table> .... </table> dan werk het niet meer.
Nog een aanvullende tip om de header te laten staan?
Alvast bedankt.
Code (php)
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
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
<?php
</p>
<div id="mijn_div">
<table width="1100" height="50" class="hovertable" >
<tr>
<th width="60" align="left">Datum</th>
<th width="150" align="left">Relatie</th>
<th width="292" align="left">Omschrijving</th>
<th width="155" align="right">Tegenrekeningnummer</th>
<th width="80" align="center">Debet</th>
<th width="80" align="center">Credit</th>
<th width="250" align="left">Bon</a></th>
</tr>
<tr>
[code]<?php
while ($data = mysql_fetch_assoc($result)):
{
{ echo '
<tr>
<th width="164" align="left">' . $data['TransactieDatum'] . '</th>
<th width="164" align="left">' . $data['RelatieNaam'] . '</th>
<th width="164" align="left">' . $data['TransactieOmschrijving'] . '</th>
<th width="164" align="right">' . $data['TegenRekeningNummer'] . '</th>
<th width="164" align="center">' . $data['Debet_1'] . '</th>
<th width="250" align="center">' . $data['Credit_1'] . '</th>
<th width="164" align="left"><a href="../Scans/' . $data['Bon'] . '.pdf" target="_new">' . $data['Bon'] . '</th>
</tr>';
}
}
endwhile;
?>
</table>
</div>
?>
</p>
<div id="mijn_div">
<table width="1100" height="50" class="hovertable" >
<tr>
<th width="60" align="left">Datum</th>
<th width="150" align="left">Relatie</th>
<th width="292" align="left">Omschrijving</th>
<th width="155" align="right">Tegenrekeningnummer</th>
<th width="80" align="center">Debet</th>
<th width="80" align="center">Credit</th>
<th width="250" align="left">Bon</a></th>
</tr>
<tr>
[code]<?php
while ($data = mysql_fetch_assoc($result)):
{
{ echo '
<tr>
<th width="164" align="left">' . $data['TransactieDatum'] . '</th>
<th width="164" align="left">' . $data['RelatieNaam'] . '</th>
<th width="164" align="left">' . $data['TransactieOmschrijving'] . '</th>
<th width="164" align="right">' . $data['TegenRekeningNummer'] . '</th>
<th width="164" align="center">' . $data['Debet_1'] . '</th>
<th width="250" align="center">' . $data['Credit_1'] . '</th>
<th width="164" align="left"><a href="../Scans/' . $data['Bon'] . '.pdf" target="_new">' . $data['Bon'] . '</th>
</tr>';
}
}
endwhile;
?>
</table>
</div>
?>
Dit werkt:
http://stackoverflow.com/questions/8321849/how-to-scroll-tables-tbody-independent-of-thead
Dus de code van de vragensteller
+
Code (php)
1
2
3
2
3
thead, tbody {
display: block;
}
display: block;
}
Live voorbeeld:
http://jsfiddle.net/nyCKE/2/
Gewijzigd op 21/06/2013 13:39:13 door Kris Peeters
bedankt voor je hulp zover. Ik ben er bijna, maar de header scrolt nog steeds mee. Ik heb het live voorbeeld als als leidraad genomen en de <div id="mijn_div"> .... </div> toegevoegd.
Dit is nu zoals ik het heb, maar de header staat nog niet stil. Zie jij waar ik nog fout zit?
Code (php)
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
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
<?php
<style type="text/css">
table {
background-color: #aaa;
}
tbody {
background-color: #ddd;
height: 20px;
overflow: auto;
}
td {
padding: 2px 5px;
}
thead, tbody {
display: block;
}
</style>
<div id="mijn_div">
<table width="1100" height="60" >
<thead>
<tr>
<td width="100" align="left">Datum</td>
<td width="250" align="left">Relatie</td>
<td width="292" align="left">Omschrijving</td>
<td width="155" align="right">Tegenrekeningnummer</td>
<td width="80" align="center">Debet</td>
<td width="80" align="center">Credit</td>
<td width="250" align="left">Bon</a></td>
</tr>
</thead>
<tbody>
[code]<?php
while ($data = mysql_fetch_assoc($result)):
{ echo '
<tr>
<td width="100" align="left">' . $data['TransactieDatum'] . '</td>
<td width="250" align="left">' . $data['RelatieNaam'] . '</td>
<td width="292" align="left">' . $data['TransactieOmschrijving'] . '</td>
<td width="155" align="right">' . $data['TegenRekeningNummer'] . '</td>
<td width="80" align="center">' . $data['Debet_1'] . '</td>
<td width="80" align="center">' . $data['Credit_1'] . '</td>
<td width="250" align="left"><a href="../Scans/' . $data['Bon'] . '.pdf" target="_new">' . $data['Bon'] . '</td>
</tr>';
}
endwhile;
?>
</tbody>
</table>
</div>
?>
<style type="text/css">
table {
background-color: #aaa;
}
tbody {
background-color: #ddd;
height: 20px;
overflow: auto;
}
td {
padding: 2px 5px;
}
thead, tbody {
display: block;
}
</style>
<div id="mijn_div">
<table width="1100" height="60" >
<thead>
<tr>
<td width="100" align="left">Datum</td>
<td width="250" align="left">Relatie</td>
<td width="292" align="left">Omschrijving</td>
<td width="155" align="right">Tegenrekeningnummer</td>
<td width="80" align="center">Debet</td>
<td width="80" align="center">Credit</td>
<td width="250" align="left">Bon</a></td>
</tr>
</thead>
<tbody>
[code]<?php
while ($data = mysql_fetch_assoc($result)):
{ echo '
<tr>
<td width="100" align="left">' . $data['TransactieDatum'] . '</td>
<td width="250" align="left">' . $data['RelatieNaam'] . '</td>
<td width="292" align="left">' . $data['TransactieOmschrijving'] . '</td>
<td width="155" align="right">' . $data['TegenRekeningNummer'] . '</td>
<td width="80" align="center">' . $data['Debet_1'] . '</td>
<td width="80" align="center">' . $data['Credit_1'] . '</td>
<td width="250" align="left"><a href="../Scans/' . $data['Bon'] . '.pdf" target="_new">' . $data['Bon'] . '</td>
</tr>';
}
endwhile;
?>
</tbody>
</table>
</div>
?>
Dat kan in de <head>, maar kan bv. ook net voor </body>
(Als het script onderaan de code staat, laadt eerst de rest van de pagina en lijkt alles dus sneller te openen voor de gebruiker)
Ook nog jQuery laden.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
for (var i = 0; i < 20; i++) {
var a = Math.floor(10 * Math.random());
var b = Math.floor(10 * Math.random());
var row = $("<tr>").append($("<td>").html(a + " + " + b + " ="))
.append($("<td>").html(a + b));
$("tbody").append(row);
}
});
</script>
<script>
$(function() {
for (var i = 0; i < 20; i++) {
var a = Math.floor(10 * Math.random());
var b = Math.floor(10 * Math.random());
var row = $("<tr>").append($("<td>").html(a + " + " + b + " ="))
.append($("<td>").html(a + b));
$("tbody").append(row);
}
});
</script>
Ik denk dat je hier beter 'pagination'kunt gebruiken. Dat houdt in dat je bijvoorbeeld 100 records ophaald en maar 25 per pagina laat zien, daaronder krijg je dan gewoon 1, 2, 3, 4 te zien en laad hij de rest van de pagina's.
Met vriendelijke groet.
Met een goede internetverbinding gaat dat echt sneller dan al die javascripts...
Ik heb toch nog even jullie hulp nodig. Het scrollen gaat goed, maar de header blijft staan.
Ik heb het voorbeeld van Kris Peeters hierboven gebruikt om het eerst te testen, maar hoewel het in het live voorbeeld wel werk, doet ie het bij mij niet. Hieronder alle code zoals ik het heb. Wat zie ik nu over het hoofd.
Code (php)
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
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
<?php
#mijn_div {
height: 500px;
overflow: auto;
}
// .......
<style type="text/css">
table {
background-color: #aaa;
}
tbody {
background-color: #ddd;
height: 100px;
overflow: auto;
}
td {
padding: 3px 10px;
}
thead, tr {
display: block;
}
</style>
// ........
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
for (var i = 0; i < 20; i++) {
var a = Math.floor(10 * Math.random());
var b = Math.floor(10 * Math.random());
var row = $("<tr>").append($("<td>").html(a + " + " + b + " ="))
.append($("<td>").html(a + b));
$("tbody").append(row);
}
});
</script>
<div id="mijn_div">
<table>
<thead>
<tr>
<td>Problem</td>
<td>Solution</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
?>
#mijn_div {
height: 500px;
overflow: auto;
}
// .......
<style type="text/css">
table {
background-color: #aaa;
}
tbody {
background-color: #ddd;
height: 100px;
overflow: auto;
}
td {
padding: 3px 10px;
}
thead, tr {
display: block;
}
</style>
// ........
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
for (var i = 0; i < 20; i++) {
var a = Math.floor(10 * Math.random());
var b = Math.floor(10 * Math.random());
var row = $("<tr>").append($("<td>").html(a + " + " + b + " ="))
.append($("<td>").html(a + b));
$("tbody").append(row);
}
});
</script>
<div id="mijn_div">
<table>
<thead>
<tr>
<td>Problem</td>
<td>Solution</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
?>
Ik hoop dat het gewoon een beginnersfout is :).
Met vriendelijke groet.
In dat geval zou ik eerst nog even kijken hoe je een pagina opbouwt (doctype, head, body, ....).
Heb je #mijn_div op deze manier opgenomen in je code?
Is onderdeel van css, dus zal op deze manier niet werken.
Je hebt toch niet echt het css-gedeelte na een php-tag staan?!
Gewijzigd op 22/06/2013 15:05:53 door Obelix Idefix
-----
Zo dan.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style type="text/css">
table {
background-color: #aaa;
}
tbody {
background-color: #ddd;
height: 100px;
overflow: auto;
}
td {
padding: 3px 10px;
}
thead > tr, tbody {
display: block;
}
</style>
table {
background-color: #aaa;
}
tbody {
background-color: #ddd;
height: 100px;
overflow: auto;
}
td {
padding: 3px 10px;
}
thead > tr, tbody {
display: block;
}
</style>
En verwijder de CSS van #mijn_div.
Gewijzigd op 24/06/2013 12:04:07 door Kris Peeters