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