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: <table id="table-utilisateurs" cellpadding="0" cellspacing="0" class="tablesorter">
<thead>
<tr>
<th><a href="#" class="fleche">Prenom</a></th>
<th width="1" height="19" style="background-image:url(img/traitBorder.jpg); background-repeat:repeat-y;"></th>
<th><a href="#" class="fleche">Nom</a></th>
<th width="1" height="19" style="background-image:url(img/traitBorder.jpg); background-repeat:repeat-y;"></th>
<th><a href="#" class="fleche">Login</a></th>
<th width="1" height="19" style="background-image:url(img/traitBorder.jpg); background-repeat:repeat-y;"></th>
<th><a href="#" class="fleche">Pass</a></th>
<th width="1" height="19" style="background-image:url(img/traitBorder.jpg); background-repeat:repeat-y;"></th>
<th><a href="#" class="fleche">E-mail</a></th>
<th style="background-image:url(img/FdCellHautAjo.jpg)"></th>
<th style="background-image:url(img/FdCellHautAjo.jpg)"></th>
<?php switch ($_GET['session']){ case "admin": ?>
<th style="background-image:url(img/FdCellHautAjo.jpg)"></th>
<th style="background-image:url(img/FdCellHautAjo.jpg)"></th>
<?php break; case "client" : echo ""; break; } ?>
</tr>
</thead>
<tbody>
<?php while ($user = mysql_fetch_assoc($results)){ ?>
<tr class="cellule" id="<?php echo"commentaire".$user['id'] ?>">
<?php switch ($_GET['session']){ case "admin": ?>
<td id="prenom-<?php echo $user['id']; ?>" class="cellule" onDblClick="inlineMod(<?php echo $user['id']; ?>, this, 'prenom', 'Texte', 'client', 'id');"><?php echo $user['prenom']; ?></td>
<?php break; case "client" : ?>
<td id="prenom-<?php echo $user['id']; ?>" class="cellule"><?php echo $user['prenom']; ?></td>
<?php break; } ?>
<td width="4" height="40" style="background-image:url(img/traitBorder.jpg); background-repeat:repeat-y;"></td>
<?php switch ($_GET['session']){ case "admin": ?>
<td id="nom-<?php echo $user['id']; ?>" class="cellule" onDblClick="inlineMod(<?php echo $user['id']; ?>, this, 'nom', 'Texte', 'client', 'id');"> <?php echo $user['nom']; ?>
</td>
<?php break; case "client" : ?>
<td id="nom-<?php echo $user['id']; ?>" class="cellule"><?php echo $user['nom']; ?>
</td>
<?php break; } ?>
<td width="4" height="40" style="background-image:url(img/traitBorder.jpg); background-repeat:repeat-y;"></td>
<?php switch ($_GET['session']){ case "admin": ?>
<td id="login-<?php echo $user['id']; ?>" class="cellule" onDblClick="inlineMod(<?php echo $user['id']; ?>, this, 'login', 'Texte', 'client', 'id');"> <?php echo $user['login']; ?>
</td>
<?php break; case "client" : ?>
<td id="login-<?php echo $user['id']; ?>" class="cellule"><?php echo $user['login']; ?>
</td>
<?php break; } ?>
<td width="4" height="40" style="background-image:url(img/traitBorder.jpg); background-repeat:repeat-y;"></td>
<?php switch ($_GET['session']){ case "admin": ?>
<td id="pwd-<?php echo $user['id']; ?>" class="cellule" onDblClick="inlineMod(<?php echo $user['id']; ?>, this, 'pwd', 'Texte', 'client', 'id');"> <?php echo $user['pwd']; ?>
</td>
<?php break; case "client" : ?>
<td id="pwd-<?php echo $user['id']; ?>" class="cellule"><?php echo $user['pwd']; ?>
</td>
<?php break; } ?>
<td width="4" height="40" style="background-image:url(img/traitBorder.jpg); background-repeat:repeat-y;"></td>
<?php switch ($_GET['session']){ case "admin": ?>
<td id="email-<?php echo $user['id']; ?>" class="cellule" onDblClick="inlineMod(<?php echo $user['id']; ?>, this, 'email', 'Texte', 'client', 'id');"><?php echo $user['email']; ?></td>
<?php break; case "client" : ?>
<td id="email-<?php echo $user['id']; ?>" class="cellule"><?php echo $user['email']; ?></td>
<?php break; } ?>
<td width="4" height="40" style="background-image:url(img/traitBorder.jpg); background-repeat:repeat-y;"></td>
<td class="cellule" style="width:60px; font-weight:600; font-size:11px;">
<a href="liste_projet_admin.php?id=<?php echo $user['id']; ?>&session=<?php echo $_GET['session']; ?>" style="text-decoration:none; color:#376ef9">Liste des projets</a> </td>
<?php switch ($_GET['session']){ case "admin": ?>
<td width="4" height="40" style="background-image:url(img/traitBorder.jpg); background-repeat:repeat-y; background-position:center;"></td>
<td class="cellule" style="width:70px; font-size:12px;">
<div onClick="recupVar(<?php echo $user['id']; ?>,'nom-<?php echo $user['id']; ?>','prenom-<?php echo $user['id']; ?>','<?php echo $user['cheminDossier']; ?>') ;">Supprimer
</div>
</td>
<?php break; case "client" : echo ""; break; } ?>
<?php } ?>
</tr></tbody>
<tfoot>
<tr><td colspan="13"><table border="0" width="810" cellpadding="0" cellspacing="0" class="HautTabGene">
<tr id="pagerOne">
<td width="16" class="basTabG"></td>
<td width="604" class="basTab">
<center>
<label style="font-size:11px;"> Rechercher</label>
<input type="text" style="width:120px; height:21px;" id="filter-box" name="filter-box"/>
<input type="submit" value="OK" style="background-image:url(img/boutonRecherche.jpg); color:#3366CC; font-size:10px; font-weight:600;border:none; width:28px; height:23px; background-repeat:no-repeat;" id="filter-clear-button">
</form>
</center></td>
<!-- appelle classes de jquery pour afficher la pagination--> <td width="174" class="basTab">
<a href="#" class="first" style="font-size:11px; color:#376ef9; text-decoration:none">Début</a>
<input type="image" src="img/flecheGauche.png" class="prev">
<input type=text size="1" value="1" class="page" style="color:#376ef9; font-weight:bold"> /
<input type=text value="1" size="1" readonly="readonly" class="pages" style="color:#376ef9; font-weight:bold">
<input type="image" src="img/flecheDroite.png" class="next">
<a href="#" class="last" style="font-size:11px; color:#376ef9; text-decoration:none">Fin</a></td>
<td width="16" class="basTabD"></td> </tr>
</table></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.