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

Question

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

我的问题是，当我加载一个页面上有多个表的功能时，分页系统应用在两个表上。我的意思是页数是两个表格上的页面数量，而不是每个（对于每个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(); 
    }                     
    });   
}); 

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