Scrollen door een tabel.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Carl Zwanenburg

Carl Zwanenburg

21/06/2013 12:01:45
Quote Anchor link
LS,

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?
 
PHP hulp

PHP hulp

28/03/2024 18:12:05
 
Kris Peeters

Kris Peeters

21/06/2013 12:54:08
Quote Anchor link
Voorbeeld

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
 
Carl Zwanenburg

Carl Zwanenburg

21/06/2013 13:21:24
Quote Anchor link
Bedankt voor de tip. Ik heb het ingevoerd en in principe werk het alleen als ik de <div> om de <table> zet. Dus <table> in de <div>, maar als eerste maak ik een header middels een <tr> </tr> daaronder komt een while - loop om de data in het scroll window te plaatsen.

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)
PHP script in nieuw venster Selecteer het PHP script
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
<?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>

?>
 
Kris Peeters

Kris Peeters

21/06/2013 13:36:01
Quote Anchor link
O ja, juist voor <table>

Dit werkt:
http://stackoverflow.com/questions/8321849/how-to-scroll-tables-tbody-independent-of-thead

Dus de code van de vragensteller
+
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
thead, tbody {
    display: block;
}



Live voorbeeld:
http://jsfiddle.net/nyCKE/2/
Gewijzigd op 21/06/2013 13:39:13 door Kris Peeters
 
Carl Zwanenburg

Carl Zwanenburg

21/06/2013 16:48:57
Quote Anchor link
Hoi Kris,

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)
PHP script in nieuw venster Selecteer het PHP script
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
<?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>

?>
 
Kris Peeters

Kris Peeters

21/06/2013 16:56:02
Quote Anchor link
Nu nog dat stuk javascript toevoegen.
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)
PHP script in nieuw venster Selecteer het PHP script
1
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>
 
Chris PHP

Chris PHP

21/06/2013 18:12:19
Quote Anchor link
Carl,

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.
 
Carl Zwanenburg

Carl Zwanenburg

22/06/2013 10:26:28
Quote Anchor link
Ik probeer het toch met scrollen te bereiken. Per pagina geeft het risico dat bepaalde informatie over het hoofd wordt gezien, bij het wisselen per pagina. Ik ben het er wel over eens dat het eenvoudiger te programmeren is, want ik heb het lek nog niet boven water. Ik ben er nog mee bezig en hoop dat het gaat lukken (moet wel, maar nu nog even niet).

Met vriendelijke groet.
 
Eddy E

Eddy E

22/06/2013 10:31:59
Quote Anchor link
Helemaal mee eens! Als dat Javascript is echt niet sneller dan wat PHP.
Met een goede internetverbinding gaat dat echt sneller dan al die javascripts...
 
Carl Zwanenburg

Carl Zwanenburg

22/06/2013 11:32:08
Quote Anchor link
Heren,

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)
PHP script in nieuw venster Selecteer het PHP script
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
<?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>    


?>



Ik hoop dat het gewoon een beginnersfout is :).

Met vriendelijke groet.
 
Obelix Idefix

Obelix Idefix

22/06/2013 15:05:21
Quote Anchor link
Is bovenstaand de code die je nu hebt en waarmee je test?
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
 
Kris Peeters

Kris Peeters

24/06/2013 11:59:24
Quote Anchor link
Ah, sorry, die javascript was gewoon om data in te pompen; ik had er niet goed op gelet.

-----
Zo dan.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


En verwijder de CSS van #mijn_div.
Gewijzigd op 24/06/2013 12:04:07 door Kris Peeters
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.