comment profiter de cette jquery plugin pagination fonctionne correctement

J'ai été à essayer d'obtenir ce jQuery plugin de pagination de travail. Pour une raison quelconque, il ne l'est pas et je ne suis vraiment pas sûr de savoir pourquoi.

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="css/simplePagination.css" type="text/css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.simplePagination.js"></script>
</head>
<body>

    <div id="selector">
        <ul class="selector">
        <li>
            <p>One</p>
        </li>
        <li>
            <p>Two</p>
        </li>
        <li>
            <p>Three</p>
        </li>
        <li>
            <p>Four</p>
        </li>
        <li>
            <p>Five</p>
        </li>
        <li>
            <p>Six</p>
        </li>
        <li>
            <p>Seven</p>
        </li>
        <li>
            <p>Eight</p>
        </li>
    </ul>
    </div>


    <script language="javascript">
    $(function() {
        $(selector).pagination({
            items: 8,
            itemsOnPage: 1,
            cssStyle: 'light-theme'
        });
    });
    </script>

</body>
</html>

Les boutons pour l'affichage des pages, mais le contenu a disparu. Ce que je fais mal?

Voici une démo: http://jsbin.com/obacig/1/edit

Fournir une démo: jsbin.com
jsbin.com/obacig/1/edit

OriginalL'auteur John Smith | 2013-02-21

J'ai eu exactement le même problème. D'après la documentation, il semble que l'outil est littéralement juste pour le rendu de la pagination de l'outil et nous avons besoin de prendre soin de la façon dont nous lier les données nous-mêmes.

tout d'abord, vous n'avez pas besoin de quoi que ce soit dans le sélecteur div - c'est là que la pagination pour afficher les commandes de:

afin de les laisser vides et votre contenu s'asseoir au-dessus dans les paragraphes ou quoi que ce soit:

<p class="selection" id="page-1">one</p>
<p class="selection" id="page-2">Two</p>
<p class="selection" id="page-3">Three</p>
<p class="selection" id="page-4">Four</p>
<p class="selection" id="page-5">Five</p>
<p class="selection" id="page-6">Six</p>
<p class="selection" id="page-7">Seven</p>
<p class="selection" id="page-8">Eight</p>


<div id="selector">
</div>

Si vous travaillez avec une dynamique de données que vous auriez à générer l'id du à la volée

puis en dessous juste avant que le corps de la balise de fermeture vous avez besoin de ce script:

<script language="javascript">
    $(function() {
        $('#selector').pagination({
            items: 10,
            itemsOnPage: 2,
            cssStyle: 'compact-theme',
            onPageClick: function(pageNumber){test(pageNumber)}
        });
    });
</script>

notez que j'ai ajouté le onPageClick fonction (besoins de renommage) qui se charge de transmettre le numéro de la page à ma fonction.

J'ai reçu ceci dans ma section d'en-tête:

<style type="text/css">
    .selection {
        display: none;
    }
</style>


<script>

function test(pageNumber)
{

  var page="#page-"+pageNumber;
  $('.selection').hide()
  $(page).show()

}

</script>


</head>

Le css à l'origine, se cache tous par classe, alors la fonction se ferme tout qui sont actuellement ouverts et ouvre celui que vous voulez par id.

semble fonctionner ok maintenant pour moi, mais c'était tellement frustrant 🙂

voici le script en entier:

<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="pager.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />

<style type="text/css">
    .selection {
        display: none;
    }
</style>


<script>

function test(pageNumber)
{

  var page="#page-"+pageNumber;
  $('.selection').hide()
  $(page).show()

}

</script>


</head>
<body>

<p class="selection" id="page-1">one</p>
<p class="selection" id="page-2">Two</p>
<p class="selection" id="page-3">Three</p>
<p class="selection" id="page-4">Four</p>
<p class="selection" id="page-5">Five</p>
<p class="selection" id="page-6">Six</p>
<p class="selection" id="page-7">Seven</p>
<p class="selection" id="page-8">Eight</p>


<div id="selector">
</div>


    <script language="javascript">
    $(function() {
        $('#selector').pagination({
            items: 10,
            itemsOnPage: 2,
            cssStyle: 'compact-theme',
            onPageClick: function(pageNumber){test(pageNumber)}
        });
    });
    </script>

</body>
</html>

OriginalL'auteur

D. Mac avait vraiment une grande réponse, mais si vous mettez en œuvre, il ne montre pas la première page automatiquement, uniquement lorsqu'une autre page est cliqué et puis vous revenez à un.

j'ai donc ajouté cette petite fonction pour la pagination lance sur la première page

function pageOne() {
    var page_1 = "#page-1";
    $('.selection').hide()
    $(page_1).show()
}



<script language="javascript">
    $(function() {
        $('#selector').pagination({
            items: 10,
            itemsOnPage: 2,
            cssStyle: 'compact-theme',
            currentPage: 1,
            onPageClick: function(pageNumber){test(pageNumber)},
            onInit: function(){pageOne()},

        });
    });
    </script>

OriginalL'auteur tallgirltaadaa

1

Trois ans ont passé depuis que cette question a été posté. Vous pouvez trouver une meilleure réponse sur ce 2014 stackoverflow page. En particulier, jetez un oeil à la réponse par Bilal Akil, et de ma propre contribution qui est directement en dessous de son niveau.

Moi aussi j'avais été complètement déconcerté par la façon de l'utiliser simplepagination.js et le projet de Loi (Bilal) m'a montré le chemin. Son article web devrait faire l'affaire pour vous, mais la version simple que j'ai mis en place sur qui 2014 stackoverflow article est celui que j'utilise toujours et il fonctionne toujours.

Si vous utilisez cette version, ou, éventuellement, le projet de Loi actuel de la version révisée trop, vous devriez toujours apposer #page-n dans le lien URL que vous mettez dans votre propre site web pour votre page, sauf si vous avez target="_blank" mis en œuvre--- même si le laissant éteint est toujours d'amener les utilisateurs à la page (la nécessité étant de l'aider à l'arrière du bouton de navigation de travail). C'est expliqué dans ma réponse dans l'2014 article.

Sur l'humour de côté, j'ai trouvé la page que nous sommes maintenant, alors que la recherche d'une solution à l'arrière du bouton de navigation problème, que je viens de rencountered au cours d'un site en cours de révision. J'ai trouvé la réponse à ma propre 2014 répondre! J'avais oublié ce détail.

OriginalL'auteur Mike O'Connor
0

$(selector) $("#sélecteur")

pour la sélection de l'Id dans jquery u besoin d'un hash tag

Essayé mais ça ne fonctionne toujours pas.

OriginalL'auteur Aaron Lee
0

Que j'ai construit et partagé ma propre jquery mobile pagination plugin pour un projet qui a besoin d'un simple paginé liste. Fondamentalement, le plugin ajoute un "Plus" pour la fin de la liste et vous pouvez configurer le "par page" articles renvoyés via un appel Ajax. Bien sûr, vous devez modifier le décalage et la limite du côté du serveur, mais dans l'ensemble je pense que c'est assez simple et utile. Essayer http://listomatic.stakbit.com/

OriginalL'auteur Staker

Vous devez vous connecter pour publier un commentaire.