Trier,paginer et filtrer tableau
cs_karima15
Messages postés
5
Date d'inscription
jeudi 9 juillet 2009
Statut
Membre
Dernière intervention
2 novembre 2009
-
9 juil. 2009 à 11:07
cs_karima15 Messages postés 5 Date d'inscription jeudi 9 juillet 2009 Statut Membre Dernière intervention 2 novembre 2009 - 3 sept. 2009 à 14:52
cs_karima15 Messages postés 5 Date d'inscription jeudi 9 juillet 2009 Statut Membre Dernière intervention 2 novembre 2009 - 3 sept. 2009 à 14:52
6 réponses
ChasseurDeChimeres
Messages postés
292
Date d'inscription
mercredi 7 novembre 2007
Statut
Membre
Dernière intervention
15 janvier 2013
3
9 juil. 2009 à 11:33
9 juil. 2009 à 11:33
plus de précisions...
Tonio_35
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
11
9 juil. 2009 à 15:41
9 juil. 2009 à 15:41
Bonjour,
Veux tu paginer/trier/filtrer ton tableau coté client ou coté serveur ?
Avantages coté client : Ne recharge pas la page, n'envoie pas de requête ajax (utilise le javascript) ;
Avantages coté serveur : tu est sur le forum PHP , page envoyée moins lourde, retour rêquete SQL (s'il y en a une) moins lourd (utilise le php) ;
Tonio
Veux tu paginer/trier/filtrer ton tableau coté client ou coté serveur ?
Avantages coté client : Ne recharge pas la page, n'envoie pas de requête ajax (utilise le javascript) ;
Avantages coté serveur : tu est sur le forum PHP , page envoyée moins lourde, retour rêquete SQL (s'il y en a une) moins lourd (utilise le php) ;
Tonio
cs_karima15
Messages postés
5
Date d'inscription
jeudi 9 juillet 2009
Statut
Membre
Dernière intervention
2 novembre 2009
10 juil. 2009 à 09:26
10 juil. 2009 à 09:26
Salem 3laycom
paginer/trier/filtrer mon tableau coté client avec phpajax et je veux que la pagination s'affiche en bas de tableau sous forme: Début<1|2|3|4>Fin.
je sais bien l'avantage de ajax.
paginer/trier/filtrer mon tableau coté client avec phpajax et je veux que la pagination s'affiche en bas de tableau sous forme: Début<1|2|3|4>Fin.
je sais bien l'avantage de ajax.
ChasseurDeChimeres
Messages postés
292
Date d'inscription
mercredi 7 novembre 2007
Statut
Membre
Dernière intervention
15 janvier 2013
3
10 juil. 2009 à 10:21
10 juil. 2009 à 10:21
Salut;
Ben on va faire simple : il te suffit de passer une variable qui determinera le "LIMIT" de ta requete sql.
++
Ben on va faire simple : il te suffit de passer une variable qui determinera le "LIMIT" de ta requete sql.
++
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
cs_karima15
Messages postés
5
Date d'inscription
jeudi 9 juillet 2009
Statut
Membre
Dernière intervention
2 novembre 2009
10 juil. 2009 à 11:12
10 juil. 2009 à 11:12
Salem 3laycom
j'ai travaillé avec jquery voici le code de jquery:
(function($) {
$.extend({
tablesorterPager: new function() {
function updatePageDisplay(c) {
var s = $(c.cssPageDisplay,c.container).val(c.totalPages);
}
function updatePage(c) {
var s = $(c.cssPage,c.container).val((c.page+1));
}
function setPageSize(table,size) {
var c = table.config;
c.size = size;
/*size*/
c.totalPages = Math.ceil(c.totalRows / 5);
c.pagerPositionSet = false;
moveToPage(table);
fixPosition(table);
}
function fixPosition(table) {
var c = table.config;
if(!c.pagerPositionSet && c.positionFixed) { var c table.config, o $(table);
if(o.offset) {
c.container.css({
top: o.offset().top + o.height() + 'px',
position: 'absolute'
});
}
c.pagerPositionSet = true;
}
}
function moveToFirstPage(table) {
var c = table.config;
c.page = 0;
moveToPage(table);
}
function moveToLastPage(table) {
var c = table.config;
c.page = (c.totalPages-1);
moveToPage(table);
}
function moveToNextPage(table) {
var c = table.config;
c.page++;
if(c.page >= (c.totalPages-1)) {
c.page = (c.totalPages-1);
}
moveToPage(table);
}
function moveToPrevPage(table) {
var c = table.config;
c.page--;
if(c.page <= 0) {
c.page = 0;
}
moveToPage(table);
}
function moveToPage(table) {
var c = table.config;
if(c.page < 0 || c.page > (c.totalPages-1)) {
c.page = 0;
}
updatePage(c);
renderTable(table,c.rowsCopy);
}
function renderTable(table,rows) {
var c = table.config;
var l = rows.length;
/*size=5*/
var s = (c.page * 5);
/*size=5*/
var e = (s + 5);
var k=(c.page+1)*c.size-1;
//alert(k);
if(e > rows.length ) {
e = rows.length;
}
var tableBody = $(table.tBodies[0]);
// clear the table body
$.tablesorter.clearTableBody(table);
for(var i = s; i < e; i++) {
//tableBody.append(rows[i]);
var o = rows[i];
var l = o.length;
for(var j=0; j < l; j++) {
tableBody[0].appendChild(o[j]);
}
}
fixPosition(table,tableBody);
$(table).trigger("applyWidgets");
if( c.page >= c.totalPages ) {
moveToLastPage(table);
}
updatePageDisplay(c);
}
this.appender = function(table,rows) {
var c = table.config;
c.rowsCopy = rows;
c.totalRows = rows.length;
/*size=5*/
c.totalPages = Math.ceil(c.totalRows / 5);
//updatePageTotals(c);
renderTable(table,rows);
};
this.defaults = {
size: 5,
offset: 0,
page: 0,
totalRows: 0,
totalPages: 0,
container: null,
cssNext: '.next',
cssPrev: '.prev',
cssFirst: '.first',
cssLast: '.last',
cssPageDisplay: '.pagedisplay',
cssPage: '.page',
cssPageSize: '.pagesize',
seperator: "/",
positionFixed: true,
appender: this.appender,
};
this.construct = function(settings) {
return this.each(function() {
config = $.extend(this.config, $.tablesorterPager.defaults, settings);
var table this, pager config.container;
$(this).trigger("appendCache");
config.size = parseInt($(".pagesize",pager).val());
$(config.cssFirst,pager).click(function() {
moveToFirstPage(table);
return false;
});
$(config.cssNext,pager).click(function() {
moveToNextPage(table);
return false;
});
$(config.cssPrev,pager).click(function() {
moveToPrevPage(table);
return false;
});
$(config.cssLast,pager).click(function() {
moveToLastPage(table);
return false;
});
$(config.cssPage,pager).change(function() {
var c = table.config;
c.page = (parseInt($(this).val())-1);
alert(c.page);
moveToPage(table);
});
});
};
}
});
// extend plugin scope
$.fn.extend({
tablesorterPager: $.tablesorterPager.construct
});
})(jQuery);
et je l'appelle dans test.php comme celui_ci:
----
Prenom |
|
Nom |
|
Login |
|
Pass |
|
E-mail |
|
|
<?php switch ($_GET['session']){ case \"admin\": ?>
|
|
<?php break; case \"client\" : echo \"\"; break; } ?>
<?php while ($user = mysql_fetch_assoc($results)){ ?>
----
\">
<?php switch ($_GET['session']){ case \"admin\": ?>
" class="cellule" onDblClick="inlineMod(<?php echo $user['id']; ?>, this, 'prenom', 'Texte', 'client', 'id');"><?php echo $user['prenom']; ?>,
<?php break; case \"client\" : ?>
" class="cellule"><?php echo $user['prenom']; ?>,
<?php break; } ?>
,
<?php switch ($_GET['session']){ case \"admin\": ?>
" class="cellule" onDblClick="inlineMod(<?php echo $user['id']; ?>, this, 'nom', 'Texte', 'client', 'id');"> <?php echo $user['nom']; ?>
,
<?php break; case \"client\" : ?>
" class="cellule"><?php echo $user['nom']; ?>
,
<?php break; } ?>
,
<?php switch ($_GET['session']){ case \"admin\": ?>
" class="cellule" onDblClick="inlineMod(<?php echo $user['id']; ?>, this, 'login', 'Texte', 'client', 'id');"> <?php echo $user['login']; ?>
,
<?php break; case \"client\" : ?>
" class="cellule"><?php echo $user['login']; ?>
,
<?php break; } ?>
,
<?php switch ($_GET['session']){ case \"admin\": ?>
" class="cellule" onDblClick="inlineMod(<?php echo $user['id']; ?>, this, 'pwd', 'Texte', 'client', 'id');"> <?php echo $user['pwd']; ?>
,
<?php break; case \"client\" : ?>
" class="cellule"><?php echo $user['pwd']; ?>
,
<?php break; } ?>
,
<?php switch ($_GET['session']){ case \"admin\": ?>
" class="cellule" onDblClick="inlineMod(<?php echo $user['id']; ?>, this, 'email', 'Texte', 'client', 'id');"><?php echo $user['email']; ?>,
<?php break; case \"client\" : ?>
" class="cellule"><?php echo $user['email']; ?>,
<?php break; } ?>
,
&session=<?php echo $_GET['session']; ?>" style="text-decoration:none; color:#376ef9">Liste des projets,
<?php switch ($_GET['session']){ case \"admin\": ?>
,
,'nom-<?php echo $user['id']; ?>','prenom-<?php echo $user['id']; ?>','<?php echo $user['cheminDossier']; ?>') ;">Supprimer
,
<?php break; case \"client\" : echo \"\"; break; } ?>
<?php } ?>
<tfoot>
----
<table border="0" width="810" cellpadding="0" cellspacing="0" class="HautTabGene">
----
, </td>
<center>
<label style="font-size:11px;"> Rechercher</label>
</form>
</center>,
<!-- appelle classes de jquery pour afficher la pagination-->
Début
/
Fin,
,
</td></tr>
</tfoot>
</table>
et voici le code script insérer sur la page test.php:
jQuery(document).ready(function() {
$("#table-utilisateurs")
.tablesorter({ debug: false, sortList: [[0, 0]], widgets: ['zebra'] })
.tablesorterPager({ container: $("#pagerOne"), positionFixed: false })
.tablesorterFilter({filterContainer: $("#filter-box"),
filterClearContainer: $("#filter-clear-button"),
filterColumns: [0, 1, 2, 3 ,4, 5, 6],
filterCaseSensitive: false});
});
enfin mon code sa marche bien mais ma probléme je veux que changer la forme d'affichage de pagination sous cette forme:Début<1|2|3|4>Fin.
Merci pour votre aide.
j'ai travaillé avec jquery voici le code de jquery:
(function($) {
$.extend({
tablesorterPager: new function() {
function updatePageDisplay(c) {
var s = $(c.cssPageDisplay,c.container).val(c.totalPages);
}
function updatePage(c) {
var s = $(c.cssPage,c.container).val((c.page+1));
}
function setPageSize(table,size) {
var c = table.config;
c.size = size;
/*size*/
c.totalPages = Math.ceil(c.totalRows / 5);
c.pagerPositionSet = false;
moveToPage(table);
fixPosition(table);
}
function fixPosition(table) {
var c = table.config;
if(!c.pagerPositionSet && c.positionFixed) { var c table.config, o $(table);
if(o.offset) {
c.container.css({
top: o.offset().top + o.height() + 'px',
position: 'absolute'
});
}
c.pagerPositionSet = true;
}
}
function moveToFirstPage(table) {
var c = table.config;
c.page = 0;
moveToPage(table);
}
function moveToLastPage(table) {
var c = table.config;
c.page = (c.totalPages-1);
moveToPage(table);
}
function moveToNextPage(table) {
var c = table.config;
c.page++;
if(c.page >= (c.totalPages-1)) {
c.page = (c.totalPages-1);
}
moveToPage(table);
}
function moveToPrevPage(table) {
var c = table.config;
c.page--;
if(c.page <= 0) {
c.page = 0;
}
moveToPage(table);
}
function moveToPage(table) {
var c = table.config;
if(c.page < 0 || c.page > (c.totalPages-1)) {
c.page = 0;
}
updatePage(c);
renderTable(table,c.rowsCopy);
}
function renderTable(table,rows) {
var c = table.config;
var l = rows.length;
/*size=5*/
var s = (c.page * 5);
/*size=5*/
var e = (s + 5);
var k=(c.page+1)*c.size-1;
//alert(k);
if(e > rows.length ) {
e = rows.length;
}
var tableBody = $(table.tBodies[0]);
// clear the table body
$.tablesorter.clearTableBody(table);
for(var i = s; i < e; i++) {
//tableBody.append(rows[i]);
var o = rows[i];
var l = o.length;
for(var j=0; j < l; j++) {
tableBody[0].appendChild(o[j]);
}
}
fixPosition(table,tableBody);
$(table).trigger("applyWidgets");
if( c.page >= c.totalPages ) {
moveToLastPage(table);
}
updatePageDisplay(c);
}
this.appender = function(table,rows) {
var c = table.config;
c.rowsCopy = rows;
c.totalRows = rows.length;
/*size=5*/
c.totalPages = Math.ceil(c.totalRows / 5);
//updatePageTotals(c);
renderTable(table,rows);
};
this.defaults = {
size: 5,
offset: 0,
page: 0,
totalRows: 0,
totalPages: 0,
container: null,
cssNext: '.next',
cssPrev: '.prev',
cssFirst: '.first',
cssLast: '.last',
cssPageDisplay: '.pagedisplay',
cssPage: '.page',
cssPageSize: '.pagesize',
seperator: "/",
positionFixed: true,
appender: this.appender,
};
this.construct = function(settings) {
return this.each(function() {
config = $.extend(this.config, $.tablesorterPager.defaults, settings);
var table this, pager config.container;
$(this).trigger("appendCache");
config.size = parseInt($(".pagesize",pager).val());
$(config.cssFirst,pager).click(function() {
moveToFirstPage(table);
return false;
});
$(config.cssNext,pager).click(function() {
moveToNextPage(table);
return false;
});
$(config.cssPrev,pager).click(function() {
moveToPrevPage(table);
return false;
});
$(config.cssLast,pager).click(function() {
moveToLastPage(table);
return false;
});
$(config.cssPage,pager).change(function() {
var c = table.config;
c.page = (parseInt($(this).val())-1);
alert(c.page);
moveToPage(table);
});
});
};
}
});
// extend plugin scope
$.fn.extend({
tablesorterPager: $.tablesorterPager.construct
});
})(jQuery);
et je l'appelle dans test.php comme celui_ci:
----
Prenom |
|
Nom |
|
Login |
|
Pass |
|
E-mail |
|
|
<?php switch ($_GET['session']){ case \"admin\": ?>
|
|
<?php break; case \"client\" : echo \"\"; break; } ?>
<?php while ($user = mysql_fetch_assoc($results)){ ?>
----
\">
<?php switch ($_GET['session']){ case \"admin\": ?>
" class="cellule" onDblClick="inlineMod(<?php echo $user['id']; ?>, this, 'prenom', 'Texte', 'client', 'id');"><?php echo $user['prenom']; ?>,
<?php break; case \"client\" : ?>
" class="cellule"><?php echo $user['prenom']; ?>,
<?php break; } ?>
,
<?php switch ($_GET['session']){ case \"admin\": ?>
" class="cellule" onDblClick="inlineMod(<?php echo $user['id']; ?>, this, 'nom', 'Texte', 'client', 'id');"> <?php echo $user['nom']; ?>
,
<?php break; case \"client\" : ?>
" class="cellule"><?php echo $user['nom']; ?>
,
<?php break; } ?>
,
<?php switch ($_GET['session']){ case \"admin\": ?>
" class="cellule" onDblClick="inlineMod(<?php echo $user['id']; ?>, this, 'login', 'Texte', 'client', 'id');"> <?php echo $user['login']; ?>
,
<?php break; case \"client\" : ?>
" class="cellule"><?php echo $user['login']; ?>
,
<?php break; } ?>
,
<?php switch ($_GET['session']){ case \"admin\": ?>
" class="cellule" onDblClick="inlineMod(<?php echo $user['id']; ?>, this, 'pwd', 'Texte', 'client', 'id');"> <?php echo $user['pwd']; ?>
,
<?php break; case \"client\" : ?>
" class="cellule"><?php echo $user['pwd']; ?>
,
<?php break; } ?>
,
<?php switch ($_GET['session']){ case \"admin\": ?>
" class="cellule" onDblClick="inlineMod(<?php echo $user['id']; ?>, this, 'email', 'Texte', 'client', 'id');"><?php echo $user['email']; ?>,
<?php break; case \"client\" : ?>
" class="cellule"><?php echo $user['email']; ?>,
<?php break; } ?>
,
&session=<?php echo $_GET['session']; ?>" style="text-decoration:none; color:#376ef9">Liste des projets,
<?php switch ($_GET['session']){ case \"admin\": ?>
,
,'nom-<?php echo $user['id']; ?>','prenom-<?php echo $user['id']; ?>','<?php echo $user['cheminDossier']; ?>') ;">Supprimer
,
<?php break; case \"client\" : echo \"\"; break; } ?>
<?php } ?>
<tfoot>
----
<table border="0" width="810" cellpadding="0" cellspacing="0" class="HautTabGene">
----
, </td>
<center>
<label style="font-size:11px;"> Rechercher</label>
</form>
</center>,
<!-- appelle classes de jquery pour afficher la pagination-->
Début
/
Fin,
,
</td></tr>
</tfoot>
</table>
et voici le code script insérer sur la page test.php:
jQuery(document).ready(function() {
$("#table-utilisateurs")
.tablesorter({ debug: false, sortList: [[0, 0]], widgets: ['zebra'] })
.tablesorterPager({ container: $("#pagerOne"), positionFixed: false })
.tablesorterFilter({filterContainer: $("#filter-box"),
filterClearContainer: $("#filter-clear-button"),
filterColumns: [0, 1, 2, 3 ,4, 5, 6],
filterCaseSensitive: false});
});
enfin mon code sa marche bien mais ma probléme je veux que changer la forme d'affichage de pagination sous cette forme:Début<1|2|3|4>Fin.
Merci pour votre aide.
cs_karima15
Messages postés
5
Date d'inscription
jeudi 9 juillet 2009
Statut
Membre
Dernière intervention
2 novembre 2009
3 sept. 2009 à 14:52
3 sept. 2009 à 14:52
Salem 3laycom
