Question

我已经创建了一个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>

有两张以上的桌子，但它们都有相同的格式。

这是我的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();
    }                                                                                   
  });        
});

Answer 1

这样的事情可能有用，我也进行了一些优化：

$(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');
    });
});

jQuery - 如何将函数应用于每个表？

1 个答案: