1
votes

Pagination avec les touches <- et -> en javascript et jquery

J'essaye de faire une pagination comme l'image ci-dessous jointe dans une table dans jQuery. J'ai essayé d'y parvenir en utilisant le code ci-dessous dans jsfiddle. Seules les options 1 2 3 fonctionnent.

comment ajouter les touches fléchées avant et arrière pour la navigation
Et aussi j'ai besoin de savoir comment ajouter l'affichage de 10 sur 25 entrées dans l'image. Quelqu'un peut-il dire comment faire cela. Merci d'avance.

Remarque: version Jquery: 3.4.1 Version de Bootsrap: 4.3.1

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3 </td></tr>
  <tr><td>Row 4</td></tr>
  <tr><td>Row 5</td></tr>
  <tr><td>Row 6</td></tr>
  <tr><td>Row 7</td></tr>
  <tr><td>Row 8</td></tr>
  <tr><td>Row 9</td></tr>
  <tr><td>Row 10</td></tr>
  <tr><td>Row 11</td></tr>
  <tr><td>Row 12</td></tr>
  <tr><td>Row 13</td></tr>
  <tr><td>Row 14</td></tr>
  <tr><td>Row 15</td></tr>
  <tr><td>Row 16</td></tr>
  <tr><td>Row 17</td></tr>
  <tr><td>Row 18</td></tr>
  <tr><td>Row 19</td></tr>
  <tr><td>Row 20</td></tr>
  <tr><td>Row 21</td></tr>
  <tr><td>Row 22</td></tr>
  <tr><td>Row 23</td></tr>
  <tr><td>Row 24</td></tr>
  <tr><td>Row 25</td></tr>
</table>

$(document).ready(function() {
  $('#data').after('<div id="nav"></div>');
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;
  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
  }
  $('#data tbody tr').hide();
  $('#data tbody tr').slice(0, rowsShown).show();
  $('#nav a:first').addClass('active');
  $('#nav a').bind('click', function() {

    $('#nav a').removeClass('active');
    $(this).addClass('active');
    var currPage = $(this).attr('rel');

    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
    css('display', 'table-row').animate({
      opacity: 1
    }, 300);
  });
});

javascript jquery html css pagination

0 commentaires

4 Réponses :

0
votes

vous devez éditer votre code js, définir currpage globalement en dehors de $ ('# nav a'). bind (.... donc juste avant la boucle, vous pouvez ajouter le lien précédent, et ajoutez le lien suivant juste après la boucle

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3 </td></tr>
  <tr><td>Row 4</td></tr>
  <tr><td>Row 5</td></tr>
  <tr><td>Row 6</td></tr>
  <tr><td>Row 7</td></tr>
  <tr><td>Row 8</td></tr>
  <tr><td>Row 9</td></tr>
  <tr><td>Row 10</td></tr>
  <tr><td>Row 11</td></tr>
  <tr><td>Row 12</td></tr>
  <tr><td>Row 13</td></tr>
  <tr><td>Row 14</td></tr>
  <tr><td>Row 15</td></tr>
  <tr><td>Row 16</td></tr>
  <tr><td>Row 17</td></tr>
  <tr><td>Row 18</td></tr>
  <tr><td>Row 19</td></tr>
  <tr><td>Row 20</td></tr>
  <tr><td>Row 21</td></tr>
  <tr><td>Row 22</td></tr>
  <tr><td>Row 23</td></tr>
  <tr><td>Row 24</td></tr>
  <tr><td>Row 25</td></tr>
</table>

$(document).ready(function() {
  var currPage = 0;

  $('#data').after('<div id="nav"></div>');
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;

  $('#nav').append('<a href="#" id="prev" rel="' + (((currPage - 1) >= 0) ? (currPage - 1) : 0) + '" ><</a> ');
  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
  }
  $('#nav').append('<a href="#" id="next" rel="' + (((currPage + 1) < numPages) ? (currPage + 1) : numPages - 1) + '" >></a> ');

  $('<span>showing ' + rowsShown + ' of ' + rowsTotal + '</span>').insertAfter('#nav')
  $('#data tbody tr').hide();
  $('#data tbody tr').slice(0, rowsShown).show();
  $('#nav a:first').addClass('active');
  $('#nav a').on('click', function() {

    $('#nav a').removeClass('active');
    $(this).addClass('active');
    currPage = parseInt($(this).attr('rel'));
    $(document).find('#prev').attr('rel', (((currPage - 1) >= 0) ? (currPage - 1) : 0));

    $(document).find('#next').attr('rel', (((currPage + 1) < numPages) ? (currPage + 1) : numPages));
    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
    css('display', 'table-row').animate({
      opacity: 1
    }, 300);
  });
});

4 commentaires

.bind est obsolète

@mplungjan utilise à la place .on ()

Je sais. Aussi, je vous ai fait un extrait. Ça ne marche pas

ma faute il y a une faute de frappe sur la première ligne de code var currpage se transforme en var currPage

0
votes

Vous avez à peu près tout fait, tout ce que vous avez à faire est de créer le bouton et de vérifier où se trouve current_page et de vous assurer de lancer la méthode click () sur cet élément de navigation ...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3 </td></tr>
  <tr><td>Row 4</td></tr>
  <tr><td>Row 5</td></tr>
  <tr><td>Row 6</td></tr>
  <tr><td>Row 7</td></tr>
  <tr><td>Row 8</td></tr>
  <tr><td>Row 9</td></tr>
  <tr><td>Row 10</td></tr>
  <tr><td>Row 11</td></tr>
  <tr><td>Row 12</td></tr>
  <tr><td>Row 13</td></tr>
  <tr><td>Row 14</td></tr>
  <tr><td>Row 15</td></tr>
  <tr><td>Row 16</td></tr>
  <tr><td>Row 17</td></tr>
  <tr><td>Row 18</td></tr>
  <tr><td>Row 19</td></tr>
  <tr><td>Row 20</td></tr>
  <tr><td>Row 21</td></tr>
  <tr><td>Row 22</td></tr>
  <tr><td>Row 23</td></tr>
  <tr><td>Row 24</td></tr>
  <tr><td>Row 25</td></tr>
</table>
<button class="left-pag">Previous</button>
<button class="right-pag">Next</button>

var current_page = 0;
$(document).ready(function() {
   
   

  $('#data').after('<div id="nav"></div>');
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;
  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
  }
  
  $('.left-pag').on('click', function() { 
      if(current_page > 0) current_page--;
      $("#nav a").eq(current_page).click();
   });
   
   $('.right-pag').on('click', function() { 
      if(current_page < numPages-1) current_page++;
      $("#nav a").eq(current_page).click();
   });
  
  $('#data tbody tr').hide();
  $('#data tbody tr').slice(0, rowsShown).show();
  $('#nav a:first').addClass('active');
  $('#nav a').bind('click', function() {

    $('#nav a').removeClass('active');
    $(this).addClass('active');
    var currPage = $(this).attr('rel');
    current_page = currPage;

    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
    css('display', 'table-row').animate({
      opacity: 1
    }, 300);
  });
});

0 commentaires

0
votes

Vous pouvez utiliser le sélecteur : visible pour obtenir les éléments affichés sur la page en cours. Utilisez la classe .active en plus du sélecteur d'attribut hte [rel] pour obtenir le lien de pagination précédent / suivant, puis déclenchez son gestionnaire de clics en utilisant trigger ("click") .

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>Row 3 </td>
  </tr>
  <tr>
    <td>Row 4</td>
  </tr>
  <tr>
    <td>Row 5</td>
  </tr>
  <tr>
    <td>Row 6</td>
  </tr>
  <tr>
    <td>Row 7</td>
  </tr>
  <tr>
    <td>Row 8</td>
  </tr>
  <tr>
    <td>Row 9</td>
  </tr>
  <tr>
    <td>Row 10</td>
  </tr>
  <tr>
    <td>Row 11</td>
  </tr>
  <tr>
    <td>Row 12</td>
  </tr>
  <tr>
    <td>Row 13</td>
  </tr>
  <tr>
    <td>Row 14</td>
  </tr>
  <tr>
    <td>Row 15</td>
  </tr>
  <tr>
    <td>Row 16</td>
  </tr>
  <tr>
    <td>Row 17</td>
  </tr>
  <tr>
    <td>Row 18</td>
  </tr>
  <tr>
    <td>Row 19</td>
  </tr>
  <tr>
    <td>Row 20</td>
  </tr>
  <tr>
    <td>Row 21</td>
  </tr>
  <tr>
    <td>Row 22</td>
  </tr>
  <tr>
    <td>Row 23</td>
  </tr>
  <tr>
    <td>Row 24</td>
  </tr>
  <tr>
    <td>Row 25</td>
  </tr>
</table>

.active {
  font-weight: bold;
}

#nav a {
  display: inline-block;
  float: left;
  padding: 5px;
}

#nav {
  overflow: auto;
}

$(document).ready(function() {
  $('#data').after('<div id="nav"></div>');
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;
  var currPage = 0;
  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
  }
  $('#data tbody tr').hide();
  $('#data tbody tr').slice(0, rowsShown).show();
  $('#nav').after('<div id="stats">Displaying ' + $('#data tbody tr:visible').length + ' of ' + rowsTotal + ' items</div>');
  $('#nav a:first').addClass('active');
  $('#nav a').on('click', function() {

    $('#nav a').removeClass('active');
    $(this).addClass('active');
    currPage = $(this).attr('rel');

    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
    css('display', 'table-row').animate({
      opacity: 1
    }, 300);
    $('#stats').text('Displaying ' + $('#data tbody tr:visible').length + ' of ' + rowsTotal + ' items');
  });

  $('<a href="#">&lt;</a> ').prependTo('#nav').on('click', function() {
    $('#nav a[rel].active').prev('a[rel]').trigger('click');
  });

  $('<a href="#">&gt;</a>').appendTo('#nav').on('click', function() {
    $('#nav a[rel].active').next('a[rel]').trigger('click');
  });
});

2 commentaires

.bind est obsolète

C'est vrai, mais je l'ai utilisé comme OP l'avait déjà utilisé dans leur code. Cependant, j'ai maintenant changé l'extrait de code complet en .on () à la place.

2
votes

J'ai déplacé les flèches et leur ai donné une classe.

Ensuite, j'interroge le lien de navigation actif

J'ai également changé le .bind obsolète en .on

Ajout du " montrant x sur y "aussi

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tbody>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3 </td></tr>
  <tr><td>Row 4</td></tr>
  <tr><td>Row 5</td></tr>
  <tr><td>Row 6</td></tr>
  <tr><td>Row 7</td></tr>
  <tr><td>Row 8</td></tr>
  <tr><td>Row 9</td></tr>
  <tr><td>Row 10</td></tr>
  <tr><td>Row 11</td></tr>
  <tr><td>Row 12</td></tr>
  <tr><td>Row 13</td></tr>
  <tr><td>Row 14</td></tr>
  <tr><td>Row 15</td></tr>
  <tr><td>Row 16</td></tr>
  <tr><td>Row 17</td></tr>
  <tr><td>Row 18</td></tr>
  <tr><td>Row 19</td></tr>
  <tr><td>Row 20</td></tr>
  <tr><td>Row 21</td></tr>
  <tr><td>Row 22</td></tr>
  <tr><td>Row 23</td></tr>
  <tr><td>Row 24</td></tr>
  <tr><td>Row 25</td></tr>
  </tbody>  
</table>
<div id="navContainer">
  <a href="#" class="arrow" id="prev">â¬…ï¸</a>
  <span id="nav"></span>
  <a href="#" class="arrow" id="next">âž¡ï¸</a> <span id="rowof"></span>
</div>

a {
  text-decoration: none;
  padding: 2px
}

.active {
  text-decoration: underline
}

$(document).ready(function() {
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;

  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
  }


  $('#nav a').on('click', function() {
    $('#nav a').removeClass('active');
    $(this).addClass('active'); // add not(".arrow"). if inside nav

    var currPage = $(this).attr('rel');
    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem)
      .css('display', 'table-row').animate({
        opacity: 1
      }, 300);
    $("#rowof").html(`Showing ${startItem+1} to ${endItem>=rowsTotal?rowsTotal:endItem} of ${rowsTotal}`);
  });

  
  $("#navContainer .arrow").on("click", function() {
    var currentPage = +$('#nav a.active').attr("rel");
    var prev = this.id === "prev";
    if (currentPage === 0 && prev); // nothing
    else if (currentPage === +$('#nav a:last').attr("rel") && !prev); // nothing
    else {
      currentPage += prev ? -1 : 1;
      $("#nav a").eq(currentPage).click();
    }
  })

  $('#data tbody tr').hide();
  $("#nav a").eq(0).click();
  
});

3 commentaires

Merci pour la suggestion. Et je veux à la fois la pagination et l'affichage de * à * de 25 dans la même ligne. Comment fait-on cela? Pouvons-nous utiliser des éléments de type liste?

Retirez simplement le
que j'avais

Bon à faire. Merci