Tableaux dynamiques et pagination

Version imprimable

Bonjour,
Code:

1 2 3 4 5 6 7 8 9 10 11 $.ajax({ type: "POST", url: "test.php", data: "name=John&location=Boston", dataType: "json" success: function(msg){ //Contitution et génération du tableau par jQuery... //Application du plugin qui permet de mettre en forme le tableau, le pagine en fonction du nombre de ses lignes } });
Les données reçues (json) du rejour ajax sont fonction de data. Ce json étant très volumineux environs 2 millions d'items, je souhaite un plugin jquery me permettant de :

mettre en forme mon tableau
paginer le tableau
faire des recherches sur les colonnes si possible

Merci d'avance...

15/09/2011, 10h13
SpaceFrog

jette a oeil sur ce plugin
http://www.trirand.com/blog/
15/09/2011, 10h19
zeclad01

Bonjour,

moi j'utilise le plugin tablesorter : http://tablesorter.com/docs/ et pour la pagination le plugin suivant : http://tablesorter.com/docs/example-pager.html

Voilà ;-)
15/09/2011, 11h47
okoweb

Citation:

Envoyé par zeclad01

Bonjour,

moi j'utilise le plugin tablesorter : http://tablesorter.com/docs/ et pour la pagination le plugin suivant : http://tablesorter.com/docs/example-pager.html

Voilà ;-)

Sauf la recherche, il répond à 90%

Merci.
15/09/2011, 12h25
okoweb

Citation:

Envoyé par SpaceFrog

jette a oeil sur ce plugin
http://www.trirand.com/blog/

Il m'a l'air de tout faire, mais il faut une bonne dose d'apprentissage.

Merci.
15/09/2011, 14h28
zeclad01

Citation:

Envoyé par okoweb

Sauf la recherche, il répond à 90%

Merci.

Exact j'avais loupé cette précision.
15/09/2011, 17h41
okoweb

Citation:

Envoyé par zeclad01

moi j'utilise le plugin tablesorter : http://tablesorter.com/docs/

Ca donne exact! J'ai un très grand tableau environ 100 000 lignes.

Citation:

Envoyé par zeclad01

et pour la pagination le plugin suivant : http://tablesorter.com/docs/example-pager.html

Ce n'est pas claire dans la doc la procédure à suivre...

Merci pour votre aide.

Code:

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
 
var header = ['Noms', 'Prénoms', 'Sexe', 'Date de naissance', 'Matricule'];
$(document).ready(function(){ 	 
		$.ajax({
			type: "POST",
			url: "staff.php",
			data: null,
			dataType: "json",
			success: function(datas){
				$("body").prepend($('<table/>', {'id': "matable", 'class': "tablesorter"}));
				$('table').append($('<thead/>'));
				$('table').append($('<tfoot/>'));
				$('table').append($('<tbody/>'));
				$('table').children("thead,tfoot").append(function(){
  					var tr = $(this).append($('<tr/>'));
  					$.each(header, function(i, item) { 
  						tr.append($('<th/>', {html: item}));
  					});		
				});
				$('tbody').append(function(){
  					$(datas).each(function(i, item) { 
  						var tr = $('tbody').append($('<tr/>'));
  						tr.append($('<td/>', {html: item.nom}));
  						tr.append($('<td/>', {html: item.prenom}));
  						tr.append($('<td/>', {html: (item.sexe==1) ? 'Homme' : 'Femme'}));
  						tr.append($('<td/>', {html: item.date_naissance}));
  						tr.append($('<td/>', {html: item.matricule}));	
  						if(i==1000) return false;
  					});	
				});
				$("table").tablesorter( {sortList: [[0,0], [1,0]]} );
			}
		});
});

Le tableau est bien inseré dans la page mais

Code:

{sortList: [[0,0], [1,0]]}

ne s'exécute pas pour trier mon tableau.

Merci pour votre aide.

Citation:

Envoyé par okoweb

Code:

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
 
var header = ['Noms', 'Prénoms', 'Sexe', 'Date de naissance', 'Matricule'];
$(document).ready(function(){ 	 
		$.ajax({
			type: "POST",
			url: "staff.php",
			data: null,
			dataType: "json",
			success: function(datas){
				$("body").prepend($('<table/>', {'id': "matable", 'class': "tablesorter"}));
				$('table').append($('<thead/>'));
				$('table').append($('<tfoot/>'));
				$('table').append($('<tbody/>'));
				$('table').children("thead,tfoot").append(function(){
  					var tr = $(this).append($('<tr/>'));
  					$.each(header, function(i, item) { 
  						tr.append($('<th/>', {html: item}));
  					});		
				});
				$('tbody').append(function(){
  					$(datas).each(function(i, item) { 
  						var tr = $('tbody').append($('<tr/>'));
  						tr.append($('<td/>', {html: item.nom}));
  						tr.append($('<td/>', {html: item.prenom}));
  						tr.append($('<td/>', {html: (item.sexe==1) ? 'Homme' : 'Femme'}));
  						tr.append($('<td/>', {html: item.date_naissance}));
  						tr.append($('<td/>', {html: item.matricule}));	
  						if(i==1000) return false;
  					});	
				});
				$("table").tablesorter( {sortList: [[0,0], [1,0]]} );
			}
		});
});

Le tableau est bien inseré dans la page mais

Code:

{sortList: [[0,0], [1,0]]}

ne s'exécute pas pour trier mon tableau.

Merci pour votre aide.

T'as essayé de trié colonne par colonne dans un premier temps ?