0

ページネーションシステムを作成するjQuery関数を作成しました。

私の問題は、複数のテーブルを含むページに関数をロードすると、ページネーション システムが 2 つのテーブルに適用されることです。つまり、ページ数は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 に答える