jQueryページ番号付きHTMLテーブル

10以上の行がある場合、次のページに進むようにユーザーに指示するハイパーリンクを作成するような表を作成しようとしています。この概念はページネーションと呼ばれますが、jQuery/JavaScriptでどのように達成できますか？また、プラグインへjQueryページ番号付きHTMLテーブル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <title>Table</title> 
     <style type="text/css"> 
      th { 
       background-color: #ddd; 
      } 
      th td { 
       border: 1px solid black; 
      } 
     </style> 
    </head> 
    <body> 
     <table> 
      <th>Heading1</th> 
      <th>Heading2</th> 
      <tbody> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr></tr> 
      </tbody> 
     </table> 
    </body> 
</html>

出典

2010-11-28 user443946

サーバー側の言語を使用していますか？ – karim79

、あなたはページネーションの仕組みにとして自分自身を教育することができるように単純化されたコードを見たい場合は、私はあなたのためにアップノック、このバイオリンを見ています。

http://jsfiddle.net/29W9Q/

コードは、単にあなたが指定したテーブルの行の可視性を変更することが以前と次の2つのボタンをバインドします。ボタンをクリックするたびに、ステップは次のようになります。前後に移動したり、現在の行を非表示にしたり、表示する行を見つけたり、10行上または10行下に表示したりすることができます。コードの残りの部分は例を示すことです。表示/非表示の行を選択するために、:lt()と:gt()：

実際のjQueryの仕事はless-thanとgreater-thanセレクタによって行われています。

var maxRows = 10; 
$('.paginated-table').each(function() { 
    var cTable = $(this); 
    var cRows = cTable.find('tr:gt(0)'); 
    var cRowCount = cRows.size(); 

    if (cRowCount < maxRows) { 
     return; 
    } 

    /* add numbers to the rows for visuals on the demo */ 
    cRows.each(function(i) { 
     $(this).find('td:first').text(function(j, val) { 
      return (i + 1) + " - " + val; 
     }); 
    }); 

    /* hide all rows above the max initially */ 
    cRows.filter(':gt(' + (maxRows - 1) + ')').hide(); 

    var cPrev = cTable.siblings('.prev'); 
    var cNext = cTable.siblings('.next'); 

    /* start with previous disabled */ 
    cPrev.addClass('disabled'); 

    cPrev.click(function() { 
     var cFirstVisible = cRows.index(cRows.filter(':visible')); 

     if (cPrev.hasClass('disabled')) { 
      return false; 
     } 

     cRows.hide(); 
     if (cFirstVisible - maxRows - 1 > 0) { 
      cRows.filter(':lt(' + cFirstVisible + '):gt(' + (cFirstVisible - maxRows - 1) + ')').show(); 
     } else { 
      cRows.filter(':lt(' + cFirstVisible + ')').show(); 
     } 

     if (cFirstVisible - maxRows <= 0) { 
      cPrev.addClass('disabled'); 
     } 

     cNext.removeClass('disabled'); 

     return false; 
    }); 

    cNext.click(function() { 
     var cFirstVisible = cRows.index(cRows.filter(':visible')); 

     if (cNext.hasClass('disabled')) { 
      return false; 
     } 

     cRows.hide(); 
     cRows.filter(':lt(' + (cFirstVisible +2 * maxRows) + '):gt(' + (cFirstVisible + maxRows - 1) + ')').show(); 

     if (cFirstVisible + 2 * maxRows >= cRows.size()) { 
      cNext.addClass('disabled'); 
     } 

     cPrev.removeClass('disabled'); 

     return false; 
    }); 

});

出典

2010-11-28 01:14:29 Orbling

+1これは非常に役に立ちます。私はコードの完全なカスタマイズ能力を持ち、彼らが作ったコードで作業する必要がないので、絶対に必要でない限り、プラグインを使うのは嫌いです。 – chromedude

@chromedudeホイールを再発明することは「悪い」ですが、微妙に変更する必要がある場合に起こっていることを正確に把握するのに役立ちます。クライアントは、開発者からの「それはしない」という答えに熱心ではありません。 jQuery（とドラッグ可能な/ドロップ可能なUIクラス）は、私が使用する唯一のJSライブラリです。 – Orbling

すごい計算！ありがとう私はわずかな変更でそれを使用しました – abhijit

jQueryページ番号付きHTMLテーブル

答えて

関連する問題