jQuery: creare la paginazione per i risultati di una ricerca AJAX

Possiamo creare la paginazione per i risultati di una ricerca AJAX con jQuery.

La soluzione è la seguente:

$.paginate = function( element, options ) {

      var currentPage = 0;
      var numPerPage = options.perPage;
      var $element = $( element );

      $element.find( options.items ).wrapAll( '<div class="search-body"></div>' );

      $element.on( "repaginate", function() {
          $element.find( options.items ).hide().slice( currentPage * numPerPage, ( currentPage + 1 ) * numPerPage ).show();
      });

      $element.trigger( "repaginate" );

      var numRows = $element.find( options.items ).length;
      var numPages = Math.ceil( numRows / numPerPage );
      var $pager = $( '<div id="search-pager"></div>' );



      for (var page = 0; page < numPages; page++ ) {
          $('<a class="page-number"></a>').text( page + 1 ).on( "click", {
              newPage: page
          }, function( event ) {
              currentPage = event.data[ "newPage" ];
              $element.trigger( "repaginate" );
              $( this ).addClass( "active" ).siblings().removeClass( "active" );
          }).appendTo( $pager );
      }
      $pager.appendTo( $element );
      
      if( numRows > numPerPage ) {
          $( '<a href="#" id="search-pager-prev"></a> ').appendTo( "#search-pager" ).hide();
          $( '<a href="#" id="search-pager-next"></a>' ).appendTo( "#search-pager" );

          $( "#search-pager-next" ).on( "click", function ( e ) {
              e.preventDefault();
              currentPage++;
              if ( currentPage > 0 ) {
                  $("#search-pager-prev").show();
              }
              if ( currentPage === numPages ) {
                  currentPage = 0;
              }
              $( "#search-pager .page-number" ).eq( currentPage ).trigger( "click" );
          });

          $( "#search-pager-prev" ).on( "click", function ( e ) {
              e.preventDefault();
              currentPage--;
              if ( currentPage == 0 ) {
                  $( "#search-pager-prev" ).hide();
              }
              if ( currentPage === 0 ) {
                  currentPage = 0;
              }
              $( "#search-pager .page-number" ).eq( currentPage ).trigger( "click" );
          });
      }

};

Il nostro codice inserisce la paginazione solo quando i risultati superano il numero di risultati per pagina. Per evitare di mostrare un numero troppo elevato di link, vengono mostrati solo i link per la pagina successiva e precedente. Esempio d'uso:

$.when( $.getJSON( "/ajax/search", { q: "jQuery" } ) ).done(function( resp ) {
    if( resp.results.length > 0 ) {
        var html = "";
        $.each( resp.results, function( i, result ) {
            // Crea il contenuto HTML
        });
        $( "#search-results" ).html( html );
        $.paginate( "#search-results", {
            items: ".result",
            perPage: 10
        });
    }
});