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 2010-11-28 00:54:59

或者給插件，如果你想看到簡化的代碼，所以你可以教育自己，以分頁是如何工作的，看看這個小提琴我敲了你。

http://jsfiddle.net/29W9Q/

的代碼只是結合兩個按鈕，一個和下一個改變您指定的錶行的可見性。每次點擊一個按鈕時，步驟是：查看您是否可以向後或向前移動，隱藏當前行，找到應該可見的行，向上或向下10行，然後使其可見。其餘的代碼是爲了說明這個例子。

真正的jQuery的工作正在由less-than和greater-than選擇做：:lt()和:gt()，選擇隱藏/顯示行。

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 2010-11-28 03:21:17

jQuery分頁HTML表格

回答

相關問題