pagindex

pagindex

by mircea s

HTML

<html>
<!--<head/> -->
<body>
  Paged items display
<div id="set1" class="divcls">
<ul>
 <li><h4>01</h4></li>
 <li><h4>02</h4></li>
 <li><h4>03</h4></li>
 <li><h4>04</h4></li>
 <li><h4>05</h4></li>
</ul>
</div>
<div id="set2" class="divcls">
<ul>
 <li><h4>06</h4></li>
 <li><h4>07</h4></li>
 <li><h4>08</h4></li>
 <li><h4>09</h4></li>
 <li><h4>10</h4></li>
</ul>
</div>
<div id="set3" class="divcls">
<ul>
 <li><h4>11</h4></li>
 <li><h4>12</h4></li>
 <li><h4>13</h4></li>
 <li><h4>14</h4></li>
 <li><h4>15</h4></li>
</ul>
</div>
<div id="set4" class="divcls">
<ul>
 <li><h4>16</h4></li>
 <li><h4>17</h4></li>
 <li><h4>18</h4></li>
 <li><h4>19</h4></li>
 <li><h4>20</h4></li>
</ul>
</div>
<div id="set5" class="divcls">
<ul>
 <li><h4>21</h4></li>
 <li><h4>22</h4></li>
 <li><h4>23</h4></li>
 <li><h4>24</h4></li>
 <li><h4>25</h4></li>
</ul>
</div>
<div id="set6" class="divcls">
<ul>
 <li><h4>26</h4></li>
</ul>
</div>

<span><a href="#" id="rglr" class="bkwrd" onclick="firstPage(pg)">first</a> <a href="#" id="rglr" class="bkwrd" onclick="prevPage(pg-1)">prev</a>
<span id="rbntxt" style="font-size:18"> </span> <a href="#" id="rglr" class="frwrd" onClick= "nextPage(pg+1)">next</a> <a href="#" id="rglr" class="frwrd" onclick="lastPage(pgni)">last</a> </span>
</body>
</html>

CSS

#rglr {
font-size: 18px;
}

a.bkwrd {
margin-right: 4px;
}

a.frwrd {
margin-left: 4px;
}

a.end {
 pointer-events: none;
 cursor: default;
}

div.divcls {
margin-left: 50;
display: none;
}


#lst_lyt {
 left: 2px;
}

JavaScript

var pg=1, pgni=6,
    lnknodf = document.getElementsByClassName("frwrd"),
    lnknodb = document.getElementsByClassName("bkwrd");
/* simulate some very simple (and inefficiently perhaps) paging technique - only for demo purpose ! */

var i=1; 
tgID = document.getElementById('rbntxt'); 
tgID.textContent = "pag 1 / 6";
document.getElementById("set"+i).style.display = "block";

for(i=0; i<lnknodb.length;i++)
  lnknodb[i].style.pointerEvents = 'none';

document.body.style.cursor = "default";

function nextPage(num) 	/* next page */
{
 if(pg==6)
   console.log("last page!");
 else 
 {
  document.getElementById("set"+num).style.display="block";
  num--; pg++; 

  document.getElementById("set"+num).style.display="none";
  for(i=0; i<lnknodb.length;i++)
    lnknodb[i].style.pointerEvents = '';
  document.body.style.cursor = "auto";

 inltxtinsrt(tgID,pg);
 if(pg>=6)
  {
   for(i=0; i<lnknodf.length;i++)
     lnknodf[i].style.pointerEvents = 'none';  // deactivated link
   document.body.style.cursor = "default"; 
   for(i=0; i<lnknodb.length;i++)
     lnknodb[i].style.pointerEvents = '';  // activated link 
   document.body.style.cursor = "auto"; 

  console.log ("last pag !");
  }
 }
}

function prevPage(num)  /* prev. page */
{
 if(pg==1)
  console.log ("first pag.");
 else 
 {
   document.getElementById("set"+num).style.display="block";  
   num++; pg--;
   document.getElementById("set"+num).style.display="none"; 
  
  for(i=0; i<lnknodf.length;i++)
    lnknodf[i].style.pointerEvents = '';  // active
   document.body.style.cursor = "auto";
  inltxtinsrt(tgID,pg);
  if(pg==1)
  {
  for(i=0; i<lnknodb.length;i++)
    lnknodb[i].style.pointerEvents = 'none';  // inactive
  document.body.style.cursor = "default";
 
  for(i=0; i<lnknodf.length;i++)
    lnknodf[i].style.pointerEvents = ''; 
  document.body.style.cursor = "auto";
  }
 }
}

function firstPage(num)  /* first page */
{
 document.getElementById("set"+1).style.display="block";
 num = 2
...