jquery tablesorter pager, liens de pagination haut et bas

Question

Je travaille sur un projet, il a pagination en utilisant jquery.tablesorter.pager. Il a des liens de pagination sur le dessus. maintenant je veux ajouter le même lien au fond aussi bien. J'ai essayé d'ajouter div pager au fond, mais ça ne marche pas. toute aide appréciée.

Answer 1

À titre de suggestion, vous pouvez essayer d'utiliser le même pager mais le faire apparaître en haut ou en bas comme requis lors du défilement.

i ajouté 2 divs comme des espaces réservés à ma page ci-dessus et au-dessous de la table:

<div id="PagerTop"> 
    </div> 
    <table id="mytable" class="tablesorter"> 
    </table> 
    <div id="PagerBottom"> 
    </div> 

Puis j'ai ajouté des fonctions JQuery pour vérifier si l'élément de téléavertisseur est en vue:

// Check if the element is in view 
function isScrolledIntoViewBottom(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 
    var my_elem_offset = $(elem).offset(); //Need to check the offset first as there is a bug in IE 
    if (my_elem_offset === null) { 
     return false; 
    } 
    else { 
     var elemTop = $(elem).offset().top; 
     var elemBottom = elemTop + $(elem).height(); 
     return (elemBottom >= docViewTop); 
    } 
} 

// Check if the element is in view 
function isScrolledIntoViewTop(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 
    var my_elem_offset = $(elem).offset(); //Need to check the offset first as there is a bug in IE 
    if (my_elem_offset === null) { 
     return false; 
    } 
    else { 
     var elemTop = $(elem).offset().top; 
     var elemBottom = elemTop + $(elem).height(); 
     return (elemTop <= docViewBottom); 
    } 
} 

Ajouter cette script en haut de la page pour vérifier la position du pager lors du défilement:

 // When scrolling always make sure that the Pager for the table in view 
    // is either at the top or bottom of the table. 
    $(window).scroll(function() { 
     if (!isScrolledIntoViewBottom('#pager')) { 
      $("#pager").appendTo("#PagerBottom"); 
     } 
     if (!isScrolledIntoViewTop('#pager')) { 
      $("#pager").appendTo("#PagerTop"); 
     } 
    }); 

A LSO, vous pouvez définir la position par défaut de la charge intial en utilisant ce JQuery:

// Set the Pagers to the top of the table on document load 
    $(document).ready(function() { 
     $("#pager").appendTo("#PagerTop"); 
    }); 

Answer 2

J'ai le même problème et je mesure le code comme followa et il fonctionne parfaitement. L'idée est que vous mettez les 2 codes de pagination dans un div (<div id="pager">) et sous une forme (<form name="pagination" id="pagination_id">) après cela, vous devriez gérer quelques problèmes causés par la pagination de pied de page où les boutons Go et sélection de page ne fonctionnent pas par défaut avec javascript.

Voici le code:

<div id="pager" class="pager" > 
<form name="pagination" id="pagination_id"> 
    <img src="addons/pager/icons/first.png" title="" class="first"/> 
    <img src="addons/pager/icons/prev.png" title="" class="prev"/> 
    <input type="text" class="pagedisplay" name="numberofpages" onKeyPress="return handleEnter(this, event)" style="width:63px;"/> 
    <input type="button" class="gotopage" id="gotoPageButton" value="GO" style="width:auto"/> 
    <img src="addons/pager/icons/next.png" title="Next" class="next"/> 
    <img src="addons/pager/icons/last.png" title="Last page" class="last"/> 
    <select class="pagesize" name="pagesize" onchange="changePageSize(this)"> 
         <option selected="selected" value="10">10 per page</option> 
         <option value="20">20 per page</option> 
         <option value="30">30 per page</option> 
         <option value="40">40 per page</option> 
        </select> 

    <table id="mytable" class="tablesorter"> blah blah</table> 

    <!-- pagination footer --> 
    <img src="addons/pager/icons/first.png" title="First page" class="first"/> 
    <img src="addons/pager/icons/prev.png" title=Previous class="prev"/> 
    <input type="text" class="pagedisplay" name="numberofpages2" onKeyPress="return handleEnter(this, event)" style="width:63px;"/> 
    <input type="button" class="gotopage" id="gotoPageButton2" value="GO" onclick="clickGObutton()" style="width:auto"/> 
    <img src="addons/pager/icons/next.png" title="Next" class="next"/> 
    <img src="addons/pager/icons/last.png" title="Last page" class="last"/> 
    <select class="pagesize" name="pagesize2" onchange="changePageSize(this)"> 
     <option selected="selected" value="10">10 per page</option> 
     <option value="20">20 per page</option> 
     <option value="30">30 per page</option> 
     <option value="40">40 per page</option> 
    </select> 
</form> 
</div> 

alors les fonctions javascript pour le bouton Go et sélectionnez:

// On touche ENTER appuyée sur le nom-numofpages d'entrée bouton puis GO est exécutée (la table de résultats va à la page sélectionnée)

function handleEnter (field, event) { 
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; 
if (keyCode == 13) { 
    var i; 
    for (i = 0; i < field.form.elements.length; i++) 
     if (field == field.form.elements[i]) { 
      break; 
     } 

    if (field.name == "numberofpages2") { 
     document.forms["pagination"]["numberofpages"].value = field.value; 
    } 
    document.getElementById("gotoPageButton").click(); 

    return false; 
} 
else 
return true;} 

// lorsque l'en-tête de changement sélectionne également la modification en pied de page. Et l'inverse.

function changePageSize(field) { 
if (field.name == "pagesize") { 
    document.forms["pagination"]["pagesize2"].value = field.value; 
} 
else if (field.name == "pagesize2") { 
    document.forms["pagination"]["pagesize"].value = field.value; 
}} 

// si cliquez sur le bouton Go pied de page mettre la valeur numofpages2 du pied de page sur la valeur numofpages2 de tête et cliquez sur le bouton Go sur tête

function clickGObutton(){ 
document.forms["pagination"]["numberofpages"].value = document.forms["pagination"]["numberofpages2"].value 
document.getElementById("gotoPageButton").click();} 

NOTE: ce qui est arrivé? La pagination du pied de page n'a aucune fonctionnalité en elle-même (sauf les boutons suivants, précédent, dernier, premier qui fonctionne bien), nous remplissons simplement les champs et connectons les boutons sans fonctionnalité à la pagination d'en-tête.

Answer 3

utilisateur la référence de classe "pager" en html:

<div class="pager"> 
    <span class="icon-step-backward first"></span> 
    <span class="icon-backward prev"></span> 
    <span class="pagedisplay"></span> 
    <span class="icon-forward next"></span> 
    <span class="icon-step-forward last"></span> 
    <select class="pagesize"> 
     <option value="10">10</option> 
     <option value="25">25</option> 
     <option value="50">50</option> 
     <option value="100">100</option> 
    </select> 
</div> 
<table> 
    ... 
</table> 
<div class="pager"> 
    <span class="icon-step-backward first"></span> 
    <span class="icon-backward prev"></span> 
    <span class="pagedisplay"></span> 
    <span class="icon-forward next"></span> 
    <span class="icon-step-forward last"></span> 
    <select class="pagesize"> 
     <option value="10">10</option> 
     <option value="25">25</option> 
     <option value="50">50</option> 
     <option value="100">100</option> 
    </select> 
</div> 

Puis en javascript définir les pageroptions comme ci-dessous:

var pagerOptions = { 
    container: $(".pager"), 
    ...other options... 
};