6
votes

Comment créer une pagination comme le site de pile de pile

Comment créer une pagination comme Stackoverflow?

javascript jquery pagination

7 commentaires

Pourquoi empiler spécifiquement le débordement? Est-ce que cela fait quelque chose de différent de toute autre forme de pagination?

Autant que je sache, la pagination de la pile de pile est entièrement serveur: il n'a rien à voir avec JavaScript ou JQuery.

Sa pagination côté client, si vous désactivez JavaScript dans votre navigateur, vous pouvez voir que ce message "Overflow de pile fonctionne mieux avec JavaScript activé" et toutes les pages montrent sur une page

@ User1400: Bien qu'il affiche ce message lorsque JavaScript est désactivé, la pagination fonctionne toujours.

De toute évidence, il ne télécharge pas 600k questions au navigateur.

@Codeka, vous avez raison, lorsque JavaScript est désactivé, la pagination fonctionne

Dupliqué possible de Stackoverflow.com/Questtions/2523075 / ...

6 Réponses :

7
votes

Vous n'avez pas dit quelle technologie latérale de serveur que vous utilisez, mais si vous souhaitez une solution latérale du client pur, vous pouvez jeter un coup d'œil sur le jQuery pagination plugin. Voici un page de démonstration .

0 commentaires

1
votes

Utiliser JQuery Plugin Pagination:

http://plugins.jquery.com/project/pagination

1 commentaires

Oh ok bien. Je ne vérifie que sur jQuery pagination link il donne une URL différente, alors je fournis uniquement l'URL des plugins principaux JQuery. Maintenant, j'ai vérifié que c'est le lien de page de démonstration. OK bien.

2
votes

Incluez simplement le plug-in JQuery et JQuery Pagination dans votre page et utilisez ceci,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pager" id="Pagination">
  <!-- the container for your first pagination area -->
</div>

0 commentaires

0
votes

Cela fonctionne très bien pour moi. Comme ce n'est pas JavaScript, les utilisateurs avec JavaScript désactivé peuvent l'utiliser aussi.

0 commentaires

1
votes

Vous pouvez créer une pagination à l'aide de Twitter Bootstrap avec moins de 10 lignes de code comme celle-ci exemple de pagination à l'aide de twitter bootstrap

0 commentaires

0
votes

Vous pouvez également utiliser cette fonction:

function makePaging(totalPages, pageIndex) {
    var oPaging, i, j, k;
    var totalPages = parseInt(totalPages);

    pageIndex++;

    i = pageIndex;
    j = pageIndex - 1;
    k = pageIndex + 1;

    var oBefore, oAfter;
    oBefore = "";
    oAfter = "";

    while (j != 0 && j != i - 6) {
        oBefore = "<a class='Page' href='#' data-index='" + (j - 1) + "'>" + j + "</a>&nbsp;" + oBefore;
        j--;
    }

    for (; k < totalPages + 1 && k < i + 6; k++) {
        oAfter += "<a class='Page' href='#' data-index='" + (k - 1) + "'>" + k + "</a>&nbsp;";
    }

    oPaging = oBefore + "<a class='CurPage' href='#' rel='' style='color:Red;'>" + i.toString() + "</a>&nbsp;" + oAfter;

    return oPaging;
}

0 commentaires