web-dev-qa-db-fra.com

Comment utiliser SimplePagination jquery

J'essaie d'utiliser simplePagination sur mon code. (Je développe avec MVC4 C #)

Disons que j'ai ce groupe de codes

<table>
    <thead>
        <tr>
            <td><input type="checkbox" name="select-all" id="select-all" /></td>
            <td style="text-align: left">Name</td>
            <td style="text-align: left">Created By</td>
            <td style="text-align: left">Created Date</td>
        </tr>
    </thead>
    <tbody>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Window</td>
            <td>John</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Door</td>
            <td>Chris</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Floor</td>
            <td>Michael</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Car</td>
            <td>James</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Bike</td>
            <td>Steven</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
    </tbody>
</table>

* Remarque: dans le code ci-dessus, j'ajoute la classe "post" à chaque "tr" (ligne dans le corps du tableau). Et ces lignes sont générées dynamiquement par for loop (C #)

Et de la documentation si je veux utiliser simplePagination je dois déclarer le jquery comme ceci:

$(function() {
    $(selector).pagination({
        items: 100,
        itemsOnPage: 10,
        cssStyle: 'light-theme'
    });
});

En fait, je ne sais pas trop comment utiliser (* comment appeler) cette simplePagination . C'est la première fois que je traite de la pagination. 

J'ai déjà essayé de mettre ce code après la table

<div class="pagination-page"></div>

Et changez 'Selector' dans la méthode d'appel jquery avec '.pagination-page', mais cela n'a pas fonctionné.

$(function() {
    $('.pagination-page').pagination({
        items: 100,
        itemsOnPage: 10,
        cssStyle: 'light-theme'
    });
});
  1. Devrais-je remplacer 'Selector' par un nom de classe? Si oui, comment je fais ça?
  2. Deuxièmement, comment déclarer cette simplePagination afin qu’elle n’affiche que 2 lignes (seulement 2 classes 'Post') pour chaque page? 

* Signifie dans la première page, il ne montrera que 

+--------------------------------------------------+
| [] |  Name  | CreatedBy | CreatedDate            | 
|--------------------------------------------------| 
| [] | Window | John      | 01/01/2014 12:00:00 AM | 
| [] | Door   | Chris     | 01/01/2014 12:00:00 AM | 
+--------------------------------------------------+

La deuxième page montrera

+--------------------------------------------------+
| [] |  Name  | CreatedBy | CreatedDate            | 
|--------------------------------------------------| 
| [] | Floor  | Michael   | 01/01/2014 12:00:00 AM | 
| [] | Car    | James     | 01/01/2014 12:00:00 AM | 
+--------------------------------------------------+

Bientôt..

* Remarque: je ne suis pas sûr de savoir comment cette requête détectera le nombre d’éléments que nous avons, générera un nombre de pages et les placera en conséquence.

javascriptjqueryhtmljquery-pagination
18
muhihsan

Une chose à noter à propos de ce plugin, qui risque de semer la confusion chez quelques personnes, est qu’il ne met techniquement pas en place la pagination. Il génère un navigateur de page et fournit le moyen, via les événements jQuery, de le connecter simplement à notre propre fonctionnalité de pagination.

En supposant que vous ayez suivi les étapes 1 (et 2 si vous voulez le style CSS) requises à partir du lien simplePagination que vous avez inclus dans votre question, le jQuery suivant fera ce dont vous avez besoin:

jQuery(function($) {
    // Consider adding an ID to your table
    // incase a second table ever enters the picture.
    var items = $("table tbody tr");

    var numItems = items.length;
    var perPage = 2;

    // Only show the first 2 (or first `per_page`) items initially.
    items.slice(perPage).hide();

    // Now setup the pagination using the `.pagination-page` div.
    $(".pagination-page").pagination({
        items: numItems,
        itemsOnPage: perPage,
        cssStyle: "light-theme",

        // This is the actual page changing functionality.
        onPageClick: function(pageNumber) {
            // We need to show and hide `tr`s appropriately.
            var showFrom = perPage * (pageNumber - 1);
            var showTo = showFrom + perPage;

            // We'll first hide everything...
            items.hide()
                 // ... and then only show the appropriate rows.
                 .slice(showFrom, showTo).show();
        }
    });



    // EDIT: Let's cover URL fragments (i.e. #page-3 in the URL).
    // More thoroughly explained (including the regular expression) in: 
    // https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment/index.html

    // We'll create a function to check the URL fragment
    // and trigger a change of page accordingly.
    function checkFragment() {
        // If there's no hash, treat it like page 1.
        var hash = window.location.hash || "#page-1";

        // We'll use a regular expression to check the hash string.
        hash = hash.match(/^#page-(\d+)$/);

        if(hash) {
            // The `selectPage` function is described in the documentation.
            // We've captured the page number in a regex group: `(\d+)`.
            $(".pagination-page").pagination("selectPage", parseInt(hash[1]));
        }
    };

    // We'll call this function whenever back/forward is pressed...
    $(window).bind("popstate", checkFragment);

    // ... and we'll also call it when the page has loaded
    // (which is right now).
    checkFragment();



});

Vous pouvez trouver un exemple en cours d'exécution ici , et un guide plus complet sur simplePagination ici / si vous souhaitez comprendre plus précisément comment tout cela fonctionne réellement.

EDIT: Ajout d'une section de code pour gérer les fragments d'URL (lors du rechargement et du retour/retour), comme l'a souligné Mike O'Connor. Vous pouvez voir un exemple en direct de la gestion des fragments d’URL ici .

EDIT 2: Si vous avez besoin d'une compatibilité entre navigateurs pour la mise à jour des fragments arrière/suivant (c'est-à-dire IE11 ...), incluez le script History.js avant d'implémenter le code ci-dessus. Merci à Mike O'Connor pour cela :)

EDIT 3: Si vous ajoutez ou supprimez du contenu de manière dynamique, vous devez mettre à jour manuellement le paginateur pour refléter ces modifications. J'ai préparé un exemple pour cela aussi. Vous pouvez le voir courir ici .

46
Bilal Akil

Ok, j’ai testé jQuery (function ($) de Bilal Akil et c’était un bon début pour moi --- merci Bilal. Cela fonctionne, mais avec quelques défauts. Pour commencer, si vous allez sur son premier lien et cliquez sur une page 2 puis ce numéro apparaît dans la zone emplacement sous la forme " http://bilalakil.github.io/bin/simplepagination/#page-2 " --- dans le # page-2. Mais si vous copiez cette URL en entier et collez-la dans la zone d'emplacement d'un autre onglet ou d'une autre fenêtre pour simuler le lien d'une personne vers la page 2, puis cela ne fonctionne pas; vous vous retrouvez à la page 1. Ou après avoir cliqué sur la page 2 et allez à la page 2, vous pouvez simplement recharger la page, vous vous retrouverez à la page 1.

J'aurais commenté, mais je dois laisser du code ici. Voici ma jQuery modifiée (fonction ($) avec la correction de ce problème particulier:

  var items = $("#content .page");
  var numItems = items.length;
  var hashPageNum = getPageNum();  //code for getPageNum() is below
  items.hide().slice(hashPageNum-1, hashPageNum).show();

  // now setup pagination
  $("#pagination").pagination({

    items: numItems,
    itemsOnPage: 1,
    cssStyle: "light-theme",
    onPageClick: function(pageNumber) {
    items.hide().slice(pageNumber-1, pageNumber).show();
    }

  });
  $('#pagination').pagination('drawPage', hashPageNum);

J'aurais dû commencer par dire que le schéma de sélecteur que j'utilise pour les éléments de page est le suivant:

<div id="pagination"></div>
<table id="content"><tbody><tr class="page"><td>...

Et j'utilise juste perPage = 1, un <tr> par page, mais la différence essentielle est cette ligne:

items.hide().slice(hashPageNum-1, hashPageNum).show();

C’est la solution principale à ce problème de liens avec le # page-n à la fin ne fonctionne pas. La dernière ligne est également nécessaire à cet effet car elle définit la barre de pagination avec la page n sélectionnée.

Le deuxième problème est le dysfonctionnement total des boutons Précédent et Suivant avec le code nu de Bilal. Si vous placez la barre de pagination au bas d'une longue page, les lecteurs voudront sûrement utiliser la navigation intégrée dans le navigateur. EDIT: Bilal a depuis mis à jour son code pour résoudre ces problèmes.

Donc, voici une fonction qui a un détail essentiel à cette fin. Cela s'appelle dans le code ci-dessus mais à un autre endroit aussi:

function getPageNum(){
  var hashtag = parent.location.hash;
  var hashPageNum = 1; //default
  if (hashtag == '#page-1') {
    hashPageNum=1;
  } else if (hashtag == '#page-2'){
    hashPageNum=2;
  } else if (hashtag == '#page-3') {
    hashPageNum=3;
  } else if (hashtag == '') {
    hashPageNum=1;
    parent.location.hash = '#page-1';
  };
  return hashPageNum;
};

OK, je comprends que je n’ai pas été sophistiqué, mais le détail essentiel est que si parent.location.hash est null, la fonction retourne 1, pour la page 1 --- pas null.

Il y a maintenant une autre étape, et c'est utiliser une arme pour window.onpopstate, qui est une chose HTML5 (espérons que cela ne posera pas de problème avec les navigateurs non-html5 ... commentez si vous savez tout à ce sujet, s'il vous plaît):

window.onpopstate = function(e){
  var pagenum = getPageNum();
  $("#content .page").hide().slice(pagenum-1, pagenum).show();
  $('#pagination').pagination('drawPage', pagenum);
};

Et avec cela, il semble que je sois fini. Je peux copier les URL avec les suffixes # page-n et les lancer ailleurs et elles fonctionnent. Les boutons avant et arrière fonctionnent. Notez que le bit 'drawPage "dans le code ci-dessus consiste simplement à ajuster l'indication dans la barre de pagination.

OK, ceci est une modification du 16/02/2015 ... pour afficher un correctif du problème lié à IE11, qui est décrit dans les commentaires. Je n'ai pas modifié le code ci-dessus car vous ne voudrez peut-être pas résoudre le problème de cette façon, bien que cela semble fonctionner.

Allez d'abord sur ce projet github puis tapez "t" pour les fichiers (hah!) Et cliquez sur history.min.js puis sur le bouton Raw et faites un SaveAs dans votre navigateur. Vous allez donc utiliser cette bibliothèque JavaScript qui crée efficacement des événements popstate (et d'autres événements) pour les navigateurs qui ne les déclenchent pas.

Maintenant, dans le code ci-dessus, supprimez window.onpopstate = function (e) {} mais enregistrez son bloc de code et insérez-le à la fin du jQuery (function ($), juste après $ ('# pagination'). Pagination ( 'drawPage', hashPageNum), comme suit:

  $(window).on('popstate', function(e) {
  var pagenum = getPageNum();
   $("#content .page").hide().slice(pagenum-1, pagenum).show();
   $('#pagination').pagination('drawPage', pagenum);
  });

EDIT Je dois ajouter que si vous mettez un lien vers l’une de vos pages ainsi paginées sur votre site --- par exemple, votre page d’accueil a probablement des ancres dans le menu qui vont vers certaines de vos pages paginées --- alors si vous mettez target = "_ blank" dans le lien et pour le mot-clé put www.yourdomain.com/yourpaginatedpage, tout ira bien. Cela ira, car vous n'essaierez pas d'utiliser la flèche arrière de votre navigateur pour revenir à votre page d'accueil car la page paginée s'ouvrira sous la forme d'un nouvel onglet ou d'une nouvelle fenêtre.

Mais ... si vous laissez la cible = "_ vide" et ouvrez la page paginée dans la même fenêtre, vous constaterez que le bouton Précédent ne fonctionne pas. L’historique est visible lorsque vous appuyez sur la flèche de retour (c’est en fait une erreur, car il y a deux listes de yourpaginatedpage), mais le fait de cliquer sur la flèche ne fonctionnera pas.

Le remède consiste simplement à mettre www.votredomaine.com/votre_paginedpage#page-1 comme votre href ... avec le # page-1. Ensuite, la flèche arrière fonctionnera.

3
Mike O'Connor

D'abord ajouter:

<script type="text/javascript" src="mio_path_js/jquery.js"></script>
<script type="text/javascript" src="mio_path_js/jquery.simplePagination.js"></script>

<link type="text/css" rel="stylesheet" href="mio_path_css/simplePagination.css"/>

Et après, pour 10 éléments, appelez Ajax comme:

$(function() {
  $(#id_paginator").pagination({
    items: 100,
    itemsOnPage: 10,
    cssStyle: 'light-theme'
  });
});

Ou si vous voulez charger tous les éléments: 

$ .ajax ({ ...... ...... success: function (réponse, status, xhr) { jQuery (function ($) { var pageParts = $ (".paginate"); var numPages = countSelect; var perPage = 10; pageParts.slice (perPage) .hide ();

        $("#page-nav").pagination({
        items: numPages,
        itemsOnPage: perPage,
        cssStyle: "light-theme",
        currentPage: numeroSelezionato,
            onPageClick: function(pageNum) {
                $("#myModalWaiting").show();
                var start = perPage * (pageNum - 1);
                var end = start + perPage;
                cambiaPagina(start,end,pageNum);
                numeroSelezionato = pageNum;
            }
        });
    });
}

)};

Le code HTML est:

<table>
    <tr>
        <th>
            <td>
                ............
                ...............
                .................
            </td>
        </th>
     </tr></table>
<div id="id_paginator"></div>

 enter image description here

Pour un autre exemple Jquery simplePagination, voir ici .

Ou pour plus d'éléments à charger: https://lentux-informatica.com/paginazione-liste-con-jquery-parte-2-2-simplepagination-js/

0
Rosario Mezzatesta

Le code suivant fonctionne pour moi: 

function paginationTable() {

    var items = $("table tbody tr");
    var tablaeBody = $("table tbody");
        var numItems = items.length;
        var perPage = 20;

        // Only show the first 20 (or first `per_page`) items initially.
        tablaeBody.html(items.slice(0,20));
        // Now setup the pagination using the `.pagination-page` div.
        $(".pagination-page").pagination({
            items: numItems,
            itemsOnPage: perPage,
            cssStyle: "light-theme",

            // This is the actual page changing functionality.
            onPageClick: function(pageNumber) {
                // We need to show and hide `tr`s appropriately.
                var showFrom = perPage * (pageNumber - 1);
                var showTo = showFrom + perPage;

                tablaeBody.html(items.slice(showFrom,showTo));

            }
        });
}

appelez cette fonction après avoir préparé votre table HTML.

0
Sandip Solanki

J'ai testé le jQuery de Bilal Akil (fonction ($)) et j'ai trouvé une erreur que je voudrais corriger - et merci Bilal pour votre implication dans ce sujet.

Comme je ne peux pas poster un commentaire ou suggérer une modification de son post, je posterai ma réponse directement ici. Pour plus d'informations, consultez le post de Bilal Akil.

Le sélecteur de pagination était incorrect (pas le même en fait) dans le code tel que je l'ai essayé sur un site Web. J'ai donc décidé de modifier votre message. J'ai ajouté 2 variables pour assurer la flexibilité nécessaire aux modifications futures ou à la personnalisation.

// mind the slight change below, personal idea of best practices
jQuery(function($) {
    // consider adding an id to your table,
    // just incase a second table ever enters the picture..?
    var items = $("table tbody tr");

    var numItems = items.length;
    var perPage = 2;

    var pagination_placeholder_selector = ".pagination-page"; // put in a variable to ensure proper changes in the future
    var myPageName = "#page-"; // a number will follow for each page

    // only show the first 2 (or "first per_page") items initially
    items.slice(perPage).hide();

    // now setup your pagination
    // you need that .pagination-page div before/after your table
    $(pagination_placeholder_selector).pagination({
        items: numItems,
        itemsOnPage: perPage,
        cssStyle: "light-theme",
        hrefTextPrefix: myPageName,
        onPageClick: function(pageNumber) { // this is where the magic happens
            // someone changed page, lets hide/show trs appropriately
            var showFrom = perPage * (pageNumber - 1);
            var showTo = showFrom + perPage;

            items.hide() // first hide everything, then show for the new page
                 .slice(showFrom, showTo).show();
        }
    });



    // EDIT: extra stuff to cover url fragments (i.e. #page-3)
    // https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment
    // is more thoroughly commented (to explain the regular expression)

    // we'll create a function to check the url fragment and change page
    // we're storing this function in a variable so we can reuse it
    var checkFragment = function() {
        // if there's no hash, make sure we go to page 1
        var hash = window.location.hash || (myPageName+"1");

        // we'll use regex to check the hash string
        var re = new RegExp("^"+myPageName+"(\\d+)$");
        hash = hash.match(re);

        if(hash)
            // the selectPage function is described in the documentation
            // we've captured the page number in a regex group: (\d+)
            $(pagination_placeholder_selector).pagination("selectPage", parseInt(hash[1]));
    };

    // we'll call this function whenever the back/forward is pressed
    $(window).bind("popstate", checkFragment);

    // and we'll also call it to check right now!
    checkFragment();



});
0
Devour

J'ai converti le travail de Bilal Akil en une fonction et je l'ai appelé ajax car je charge des données par appel ajax. Ça marche génial. Merci à tous les participants. 

function paginate() {
// consider adding an id to your table,
// just incase a second table ever enters the picture..?
var items = jQuery("#searched_prfiles .row .col-md-4");

var numItems = items.length;
var perPage = 2;

var pagination_placeholder_selector = "#pagination_links"; // put in a variable to ensure proper changes in the future
var myPageName = "#page-"; // a number will follow for each page

// only show the first 2 (or "first per_page") items initially
items.slice(perPage).hide();

// now setup your pagination
// you need that .pagination-page div before/after your table
jQuery(pagination_placeholder_selector).pagination({
    items: numItems,
    itemsOnPage: perPage,
    cssStyle: "light-theme",
    hrefTextPrefix: myPageName,
    onPageClick: function(pageNumber) { // this is where the magic happens
        // someone changed page, lets hide/show trs appropriately
        var showFrom = perPage * (pageNumber - 1);
        var showTo = showFrom + perPage;

        items.hide() // first hide everything, then show for the new page
             .slice(showFrom, showTo).show();
    }
});



// EDIT: extra stuff to cover url fragments (i.e. #page-3)
// https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment
// is more thoroughly commented (to explain the regular expression)

// we'll create a function to check the url fragment and change page
// we're storing this function in a variable so we can reuse it
var checkFragment = function() {
    // if there's no hash, make sure we go to page 1
    var hash = window.location.hash || (myPageName+"1");

    // we'll use regex to check the hash string
    var re = new RegExp("^"+myPageName+"(\\d+)$");
    hash = hash.match(re);

    if(hash)
        // the selectPage function is described in the documentation
        // we've captured the page number in a regex group: (\d+)
        jQuery(pagination_placeholder_selector).pagination("selectPage", parseInt(hash[1]));
};

// we'll call this function whenever the back/forward is pressed
jQuery(window).bind("popstate", checkFragment);

// and we'll also call it to check right now!
checkFragment();

}

0
Muhammad Khalid