0

我制作了一个创建分页系统的 jQuery 函数。

我的问题是，当我在具有多个表的页面中加载函数时，分页系统会应用于这两个表。我的意思是页数是 2 个表上的页数，而不是每个表的页数（对于每个div表，都有一个由 PHP 完成的表）

我试图修改我的代码以将函数应用于 div 中的每个表，但它不起作用！这是我的 HTML 代码：

<div id="panneau">
  <h3>Gestion des comptes</h3>                                  
   <table id ="tabUsers">
     <thead>
      <tr>
       <th>ID</th>
       <th>Pseudo</th>
       <th>An. naissance</th>
       <th>Région</th>
       <th>Email</th>
       <th>Téléphone</th>
       <th>Numéro masqué</th>
       <th>Date inscription</th>
       <th>Compte actif</th>
       <th>Actions</th>                         
      </tr>
     </thead>
     <tbody id = "corpsTab">
       <?php include_once 'includes/inc_consulterLesComptes.php'; ?>
     </tbody>                       
  </table>
</div>

<div id="panneauValidAnnonce">
  <h3>Gestion des annonces</h3>                                  
   <table id ="tabAnnonces">
     <thead>
      <tr>
       <th>ID</th>
       <th>Titre</th>
       <th>Description</th>
       <th>Date création</th>
       <th>Taille</th>
       <th>Couleur</th>
       <th>Marque</th>
       <th>Prix</th>
       <th>Annonceur</th>
       <th>Valide</th>                          
      </tr>
     </thead>
     <tbody id = "corpsTabAnnonces">
       <?php include_once 'includes/inc_ConsulterLesAnnonces.php'; ?>
     </tbody>                       
  </table>
</div>

有超过 2 个表，但它们都有相同的格式。

这是我的 jQuery 函数：

$(document).ready(function() {
  //i've tried to add $.each('table').each(function()) but that doesnt work
  var rows=$('table').find('tbody tr').length;   
  var annonceParPage=3;             
  var nbrePage= Math.ceil(rows/annonceParPage);       
  var paginationId = $('table').attr('id');
  var $pagenumbers=$('<div id="'+paginationId+'Pages"></div>');

  for(i=0 ; i<nbrePage ; i++)   {
    $('<span class="page">'+(i+1)+'</span>').appendTo($pagenumbers);
  }

  $pagenumbers.insertAfter('table');

  $('.page').hover(function(){
    $(this).addClass('hover');
  }                                         
  function(){
    $(this).removeClass('hover');
  }
  );

  $('table').find('tbody tr').hide();               
  var tr=$('table tbody tr');
  for(var i=0;i<=annonceParPage-1;i++){
    $(tr[i]).show();
  }

  $('span').click(function(event){
    $('table').find('tbody tr').hide();
    for(i=($(this).text()-1)*annonceParPage ; i<=$(this).text()*annonceParPage-1 ; i++){
      $(tr[i]).show();
    }                                                                                   
  });        
});
4

1 回答 1

2

像这样的东西可能会起作用，我还做了一些优化：

$(document).ready(function() {
    $('table').each(function () {
      var thisTable = $(this);
      var rows=thisTable.find('tbody tr').length;   
      var annonceParPage=3;             
      var nbrePage= Math.ceil(rows/annonceParPage);       
      var paginationId = thisTable.attr('id');
      var $pagenumbers=$('<div id="'+paginationId+'Pages"></div>');

      for(i=0 ; i<nbrePage ; i++)   {
        $('<span class="page">'+(i+1)+'</span>').appendTo($pagenumbers);
      }

      $pagenumbers.insertAfter(thisTable);


      var tr=thisTable.find('tbody tr');
      tr.hide(); // optimised this selector

      for(var i=0;i<=annonceParPage-1;i++){
        $(tr[i]).show();
      }

      thisTable.find('span').click(function(event){
        thisTable.find('tbody tr').hide();
        for(i=($(this).text()-1)*annonceParPage ; i<=$(this).text()*annonceParPage-1 ; i++){
          $(tr[i]).show();
        }                                                                                   
      });        
    });
    $('.page').hover(function(){
        $(this).addClass('hover');
      },                                         
      function(){
        $(this).removeClass('hover');
    });
});
于 2013-02-18T10:08:47.307 回答