jQuery pagination
ik ben bezig met een jQuery pagination.
ik wil nu dat als je op een link klikt, je ook echt naar die pagina komt.
de volgende knop heb ik al maar de nummer linkjes willen nog niet.
hier mijn script van wat ik geprobeerd had:
(zie hieronder)
ik moet dus eigenlijk een manier vinden om te zien welke class er nog meer is bij de pagina knop
Edit:
Ik zie dat hij current helemaal niet herkent als ik het in een alert zet, hier mijn volledige script:
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<?php
$posts=4;
$herhalen=0;
echo '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>bla</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body> ';
$i=0;
while($i < $posts)
{
$i++;
if($i==1)
{
echo '<div id="'.$i.'">'.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.'</div>';
}
else
{
echo '<div id="'.$i.'" style="display: none;">'.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.'</div>';
}
echo '<a href="javascript:void(0);" class="paginaknop '.$i.'">'.$i.'</a> ';
}
echo '<br /><br /><span id="volgendeknop"></span>';
echo '
<script type="text/javascript">
fadetijd=750;
aantal='.$posts.';
current=1;
i=0;
next=1;
tijd=(fadetijd/2);
$(document).ready(function()
{
$("#volgendeknop").html(\'<a href="javascript:void(0);" class="next">Volgende</a>\');
$(".next").click(function(){
i++;
next++;
if('.$herhalen.' == 1)
{
if(current==i)
{
if(current==aantal)
{
next=1;
current=next;
$("#"+i).fadeOut(tijd);
$("#"+next).delay(tijd).fadeIn(tijd);
i=0;
}
else
{
$("#"+i).fadeOut(tijd);
$("#"+next).delay(tijd).fadeIn(tijd);
current=next;
}
}
}
else
{
if(current!=aantal)
{
$("#"+i).fadeOut(tijd);
$("#"+next).delay(tijd).fadeIn(tijd);
current=next;
}
if(current == '.$posts.')
{
$("#volgendeknop").html("Volgende");
}
}
});
$(".paginaknop").click(function(){
$("#"+current).fadeOut(tijd);
n=0;
while(n < '.$posts.')
{
n++;
$("."+n).click(function(){
$("#"+n).delay(tijd).fadeIn(tijd);
current=n;
alert(current);
});
}
});
});
</script> ';
?>
</body>
</html>
$posts=4;
$herhalen=0;
echo '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>bla</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body> ';
$i=0;
while($i < $posts)
{
$i++;
if($i==1)
{
echo '<div id="'.$i.'">'.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.'</div>';
}
else
{
echo '<div id="'.$i.'" style="display: none;">'.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.$i.'</div>';
}
echo '<a href="javascript:void(0);" class="paginaknop '.$i.'">'.$i.'</a> ';
}
echo '<br /><br /><span id="volgendeknop"></span>';
echo '
<script type="text/javascript">
fadetijd=750;
aantal='.$posts.';
current=1;
i=0;
next=1;
tijd=(fadetijd/2);
$(document).ready(function()
{
$("#volgendeknop").html(\'<a href="javascript:void(0);" class="next">Volgende</a>\');
$(".next").click(function(){
i++;
next++;
if('.$herhalen.' == 1)
{
if(current==i)
{
if(current==aantal)
{
next=1;
current=next;
$("#"+i).fadeOut(tijd);
$("#"+next).delay(tijd).fadeIn(tijd);
i=0;
}
else
{
$("#"+i).fadeOut(tijd);
$("#"+next).delay(tijd).fadeIn(tijd);
current=next;
}
}
}
else
{
if(current!=aantal)
{
$("#"+i).fadeOut(tijd);
$("#"+next).delay(tijd).fadeIn(tijd);
current=next;
}
if(current == '.$posts.')
{
$("#volgendeknop").html("Volgende");
}
}
});
$(".paginaknop").click(function(){
$("#"+current).fadeOut(tijd);
n=0;
while(n < '.$posts.')
{
n++;
$("."+n).click(function(){
$("#"+n).delay(tijd).fadeIn(tijd);
current=n;
alert(current);
});
}
});
});
</script> ';
?>
</body>
</html>
Toevoeging op 09/10/2010 14:09:23:
bump
Gewijzigd op 08/10/2010 21:55:41 door Vincent Huisman
Zie dit en dit.
Edit: Ik moet zeggen dat ik jou script ook niet echt logisch vind.
en hoe zou ik het dan moeten doen met de classnames?
Voor die classnames heb ik je links gegeven.
ik wil namelijk dat dit ook zou kunnen werken als er bijv 9999 pagina's zijn
Elke div heeft een id als bijvoorbeeld: 'pagina1'.
Elke link naar een div heeft een id als bijvoorbeeld: 'linknaar1'.
Dat nummer is gewoon het nummer van de pagina. Dan kan je met dat nummer naar die pagina gaan.
antal='.$posts.';
current=1;
i=0;
next=1;
tijd=(fadetijd/2);
moet zijn
var fadetijd=750;
var antal='.$posts.';
var current=1;
var i=0;
var next=1;
var tijd=(fadetijd/2);
dit ook bij alle andere vars
Toevoeging op 11/10/2010 19:19:55:
en als je op een simpele manier de pagina naam op wil halen geef j het een class en de id geef je naam van de link
var dezelink = $(".class").attr('id');
@daniel, dat met die vars werkt wel, ook de error console zegt er verder niets van. en zonder de var is wat sneller getypt, of is dit toch fout?
sorry voor deze miss stomme foutjes hoor maar het was maar een testje om voor mijzelf te oefenen met js en jquery
Zoals Daniel bijvoorbeeld voorstelt, met class en id.
Dus dan doe je er nog een class bij hangen, waar je een click op registreert en die handel je met id af o.i.d.
Of je doet gewoon de nummers als data pakken, als je classes gebruikt.
Toevoeging op 12/10/2010 08:10:37:
ik ben even weer opnieuw begonnen, dit is wat ik nu heb:
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
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
<?php
$paginas = 9;
echo '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>bla</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>';
for($i=1; $i<=$paginas; $i++)
{
echo '<div id="pagina'.$i.'">'.$i.', '.$i.', '.$i.', '.$i.', '.$i.', '.$i.', '.$i.', '.$i.', '.$i.', '.$i.'</div>';
}
for($i=1; $i<=$paginas; $i++)
{
echo '<a href="javascript:void(0);" alt="pagina '.$i.'" id="link'.$i.'">'.$i.'</a> ';
}
echo '
<script type="text/javascript">
$(document).ready(function()
{
var paginas = '.$paginas.';
var currentpage = 1;
for(n=1; n<=paginas; n++)
{
if(n == currentpage)
{
$("#pagina"+n).css("display","block");
}
else
{
$("#pagina"+n).css("display","none");
}
$("#link"+n).click(function(){
alert("#link"+n);
});
}
});
</script>
</body>
</html>';
?>
$paginas = 9;
echo '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>bla</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>';
for($i=1; $i<=$paginas; $i++)
{
echo '<div id="pagina'.$i.'">'.$i.', '.$i.', '.$i.', '.$i.', '.$i.', '.$i.', '.$i.', '.$i.', '.$i.', '.$i.'</div>';
}
for($i=1; $i<=$paginas; $i++)
{
echo '<a href="javascript:void(0);" alt="pagina '.$i.'" id="link'.$i.'">'.$i.'</a> ';
}
echo '
<script type="text/javascript">
$(document).ready(function()
{
var paginas = '.$paginas.';
var currentpage = 1;
for(n=1; n<=paginas; n++)
{
if(n == currentpage)
{
$("#pagina"+n).css("display","block");
}
else
{
$("#pagina"+n).css("display","none");
}
$("#link"+n).click(function(){
alert("#link"+n);
});
}
});
</script>
</body>
</html>';
?>
als ik nu op een linkje klik krijg ik wel een schermpje er voor maar met #link10 er in. ik weet niet hoe ik het voor elkaar zou moeten krijgen om ipv 10 het nummer van de aangeklikte voor mijn neus te krijgen
Gewijzigd op 12/10/2010 22:22:01 door Vincent Huisman
Gewijzigd op 13/10/2010 17:39:55 door Vincent Huisman
Dit bijvoorbeeld
Wordt dan
Gewijzigd op 13/10/2010 17:46:53 door Pieter van Linschoten
Pieter van Linschoten op 13/10/2010 17:45:52:
Neen, gewoon een json object ervan maken.