Tableaux dynamiques et pagination

**okoweb** · 14/09/2011, 16h52

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 15/09/2011, 10h13

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

**zeclad01** · 15/09/2011, 10h19

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à ;-)

**okoweb** · 15/09/2011, 11h47

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.

**zeclad01** · 15/09/2011, 14h28

Envoyé par okoweb

Sauf la recherche, il répond à 90%

Merci.

Exact j'avais loupé cette précision.

**okoweb** · 15/09/2011, 17h41

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.

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.

**okoweb** · 16/09/2011, 15h11

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
 
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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Merci pour votre aide.

**zeclad01** · 20/09/2011, 16h18

Envoyé par okoweb

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
 
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]]} );
			}
		});
});