尋呼javascript

Question

我想通過html和javascript做一個簡單的硬編碼分頁系統。 我已經給每個元素一個ID PM-1，PM-2，PM-3等，每個頁面將列出這些項目中的10個。

（我知道這是一個非常不方便的尋呼系統，但它只是用於實驗目的。）

所以。我的代碼的HTML作爲下面列出 -

<div id="PM-22">item 1</div> 
<div id="PM-21">item 2</div> 
<div id="PM-20">item 3</div> 
<div id="PM-19">item 4</div> 
<div id="PM-18">item 5</div> 
<div id="PM-17">item 6</div> 
<div id="PM-16">item 7</div> 
<div id="PM-15">item 8</div> 
<div id="PM-14">item 9</div> 
<div id="PM-13">item 10</div> 
<div id="PM-12">item 11</div> 
<div id="PM-11">item 12</div> 
<div id="PM-10">item 13</div> 
<div id="PM-9">item 14</div> 
<div id="PM-8">item 15</div> 
<div id="PM-7">item 16</div> 
<div id="PM-6">item 17</div> 
<div id="PM-5">item 18</div> 
<div id="PM-4">item 19</div> 
<div id="PM-3">item 20</div> 
<div id="PM-2">item 21</div> 
<div id="PM-1">item 22</div> 
<span style="text-align:right;"><p>Page <a href="javascript:PMPaging(24,1)">1</a> <a href="javascript:PMPaging(24,2)">2</a> <a href="javascript:PMPaging(24,3)">3</a></p></span> 

而且我的javascript功能如下 -

<script type="text/javascript"> 
         function PMPaging(num,pg) { 
          pg *= 10; 
          var upperlim = num - pg - 10; 
          var lowerlim = upperlim - 10; 
          if(lowerlim < 0) { lowerlim =0;} 
          for(num; num > 0; num--) { 
           document.getElementById('PM-'+num).style.display = 'none'; 
           while (num <= upperlim && num > lowerlim) { 
            document.getElementById('PM-'+num).style.display = 'block'; 
            num--; 
           } 
          } 
         } 

</script> 

假設第10項只顯示在頁面加載，其餘都隱藏 -現在，每當我運行這段代碼，它只顯示前10項，但當我點擊頁面2或3時，什麼也沒有發生，如果我點擊頁面1，它顯示最後2項？跆拳道？大聲笑，第一頁是身份證號碼「22-13」和第二頁是「12-2」，第三頁應該是「2-1」..謝謝！

Answer 1

有沒有原因您沒有使用JQuery Pagination Plugin？看看demonstration。

如果您需要能夠鏈接到特定頁面，請看this answer。

Answer 2

我明白你的觀點。您可以將此修改的腳本用於相同的目的。我希望它有幫助。 （你不必改變你的HTML部分

<script type="text/javascript"> 

function PMPaging(num,pg) { 
    pg *= 10; 
    var upperlim = pg+1; 
    var lowerlim = upperlim - 10; 
    if(lowerlim < 0) { lowerlim =1;} 
    for(i=1; i <= num; i++) { 
     if(i<=upperlim && i>=lowerlim){ 
      document.getElementById('PM-'+i).style.display = 'block'; 
     }else{ 
      document.getElementById('PM-'+i).style.display = 'none'; 
     } 
    } 
} 

</script> 

Answer 3

圍繞與這個div您的項目：

<div class="itms"> 
     <div id="PM-22">item 1</div> 
     <div id="PM-21">item 2</div> 
     <div id="PM-20">item 3</div> 
     <div id="PM-19">item 4</div> 
     <div id="PM-18">item 5</div> 
     <div id="PM-17">item 6</div> 
     <div id="PM-16">item 7</div> 
     <div id="PM-15">item 8</div> 
     <div id="PM-14">item 9</div> 
     <div id="PM-13">item 10</div> 
     <div id="PM-12">item 11</div> 
     <div id="PM-11">item 12</div> 
     <div id="PM-10">item 13</div> 
     <div id="PM-9">item 14</div> 
     <div id="PM-8">item 15</div> 
     <div id="PM-7">item 16</div> 
     <div id="PM-6">item 17</div> 
     <div id="PM-5">item 18</div> 
     <div id="PM-4">item 19</div> 
     <div id="PM-3">item 20</div> 
     <div id="PM-2">item 21</div> 
     <div id="PM-1">item 22</div> 
    </div> 
<span style="text-align:left;"><p>Page <a href="javascript:P.turnPage(1)">1</a> <a href="javascript:P.turnPage(2)">2</a> <a href="javascript:P.turnPage(3)">3</a></p></span> 

然後使用此代碼JS：

function Paginate(itemsPerPage) { 
     var items = document.querySelectorAll(".itms div"), 
      iL = items.length || 0; 

     this.turnPage = function(pageNum) { 
      var startItem = (pageNum*itemsPerPage) - itemsPerPage; 
      for (var i = 0; i < iL; i++) { 
       items[i].style.display = (startItem <= i && i < (startItem + itemsPerPage)) ? "block" : "none"; 
      } 
     } 
    } 
var P = new Paginate(10);//10 items per page 

翻頁，使用：

P.turnPage(2); //2 for the page Number