Pagination avec jquery

**baichoch** · 28/11/2013, 00h45

Bonjour,

Je suis débutant en JQuery, et je suis entrain de mettre en place une pagination sur un tableau de données avec des boutons radios,

Pouvez-Vous m'aider , tout document ou exemple qui va me permettre d'avancer est le bienvenu !!
Je vous remercie d'avance pour votre aide !

Cordialement

Voici mon code :

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
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
 
<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Demo</title>
 
	<script src="scripts/jquery.js"></script>
	<script>	
	$(function(){		
		$('.spanRadio').click(function(){
 
			elem = $(this);
			if(!elem.hasClass('active')) {
				$('.spanRadio').removeClass('active');
				$('.spanRadio').prev('input').removeAttr('checked');
				elem.addClass('active');				
				elem.prev('input').prop('checked', true).attr('checked', 'checked');
					}
		});
 
/* ------------------------- Simulation du clic ------------------------------- */		
		var indexOption = 0;
		var firstClick = true;
		var nbOption = $('.spanRadio').length -1;
 
		$('.btnFlecheHaut, .btnFlecheBas').click(function(){
			if(firstClick) {
				$('.spanRadio').eq(0).trigger('click');
				firstClick = false;
			} else {
				if($(this).hasClass('btnFlecheBas')) {
					if(indexOption < nbOption) indexOption++;
				} else {
					if(indexOption > 0) indexOption--;
				}
				$('.spanRadio').eq(indexOption).trigger('click');
			}
		});
 
 
 
	});
 
	/*-----------------------------DEMO PAGINATION------------------------------*/
	/*NEXT */
 
	/*PREVIOUS */
 
 
	/*-------------------------------------------------------------------------*/
 
	</script>
 
 
</head>
 
<body>
 
<center> 
	<div>
		<span >Pagination</span>
	</div>
</center>
<center>
<table id="tabd">
	       <tr align="center">
				<td ></td>
				<td>page 1/3</td>
			</tr>
</table>
</center>
<table align="center" border="0">
 
 
 
 
 
<tr>
 
<td>
 
 
	<div>
		<table id="tableau" border="1" align="center">
 
			<tr>
				<th width="234">Colonne1</th>
				<th width="234">Colonne2</th>
				<th width="234">Colonne3</th>
				 <th width="234">Colonne4</th>
			</tr>
			<tr>
				<td>DonneA<br /> 2342553</td>
				<td >99,99</td>
				<td >-99,99</td>
				<td><input class="inputRadio" type="radio" name="choix" value="Choix1" /><span class="spanRadio"></span></td>
			</tr>
			<tr >
				<td>DonneB<br />323000</td>
				<td>934,99</td>
				<td>-94599</td>
				<td><input class="inputRadio" type="radio" name="choix" value="Choix2" /><span class="spanRadio"></span></td>
			</tr>
			<tr>
				<td>DonneC<br />0009736</td>
				<td>99,99</td>
				<td>-999,99</td>
				<td><input class="inputRadio" type="radio" name="choix" value="Choix3" /><span class="spanRadio"></span></td>
			</tr>
			<tr>
				<td>DonneD<br />0400736</td>
				<td>99,99</td>
				<td>-999,99</td>
				<td><input class="inputRadio" type="radio" name="choix" value="Choix4" /><span class="spanRadio"></span></td>
			</tr>
		</table>
	 </div>
 
</td>
 
 
<td>
 
<!-- BOUTONS -->
 
	<div class="btnFlecheHaut"><img src="images/Precdent.gif"></div>
	<div class="btnFlecheBas"><img src="images/next.gif"></div>
 
 
	</td>
	</tr>
</table>
 
 
</body>
</html>

**SpaceFrog** · 28/11/2013, 08h27

un tableau de données ? pagination ...

=> JQgrid ou DataGrid

**baichoch** · 28/11/2013, 15h59

Bonjour,

Merci de votre retour !

Notre cas de pagination est un peu spéciale, est ce qu’il n y a pas moyen de faire un algorithme en jquery sans passer par un composant DataGrid ou jqGrid ?

Cordialement

**SpaceFrog** · 28/11/2013, 16h02

Tes données proviennent d'une requête ...

il suffit juste d'envoyer au serveur un un paramètre pour pouvoir faire une requête avec un LIMIT donc l'indexe de début et le nombre d’éléments à retourner

**baichoch** · 28/11/2013, 16h19

Bonjour,

Merci de votre retour,

Oui, les données proviennent d'une requête (via une liste), puis ils seront affichés sur une grille, deux boutons (images flèches) Next/Previous seront à coté de cette grille pour changer le contenu de la grille toute en restant sur la même page jsp, la pagination sera effectuée seulement sur la grille sans recharger totalité de la page jsp.
En plus je dois gérer l’affichage des boutons next /previous ==> le bouton next ne sera affiché seulement si la liste contient un x nombre > 6, puis le bouton previous ne sera affiché qu’a partir du premier clique sur le next.

Merci

**SpaceFrog** · 28/11/2013, 16h49

Je ne vois pas ou est le souci ...

Chacun de tes boutons doit faire une requete ajax en envoyant au serveur l'indexe actuel et le nombre de lignes voulues.

la page de traitement coté serveur recupère les deux elements pour faire le LIMIT et te retourne :
- soit le code html voulu directement que tu injectera en html() dans ton tableau ,
- soit un json que tu traiterais sur le success de ta requete ajax poru modifier l'affichage

Pagination avec jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager