Dynamic index for pagination

Question

I create a table that is laid out (only 10 elements are displayed per page). im not sure how big the table will be, since the user is adding it dynamically. I want to have numbers corresponding to the pages in the table, and when the user clicks on one of the pages on which he loads the page elements. I also want to show which page the user is on. I currently have an integer tracking the page on which the user is logged in, next back, first and last button. I really need to know how to create a dynamic set of numbers that can be clicked. I am using Chrome, HTML5 and JS browser.

thanx in advance

Java script

function display(){//shows the Status Table document.getElementById("DStatusTable").hidden=''; document.getElementById("buttons").hidden=''; var table = document.getElementById('statusTable'); for(var i =1; i<table.rows.length; i++){ var x =table.rows[i].cells; table.rows[i].id ='notselected'; table.rows[i].hidden=''; if (!((pageCUR*10+i)>fileLIST.length)){ x[0].innerHTML = fileLIST[pageCUR*10+(i-1)] [0].name; x[1].innerHTML = fileLIST[pageCUR*10+ (i-1)][1]; } else{ table.rows[i].hidden='hidden'; } function nextPage(){//shows next page pageCUR++; if (pageCUR>=parseInt(pageMAX)){//checks if on last page document.getElementById('Next').hidden='hidden'; document.getElementById('Last').hidden='hidden'; } else { document.getElementById('Next').hidden=''; document.getElementById('Last').hidden=''; } document.getElementById('Back').hidden=''; document.getElementById('First').hidden=''; display(); } function backPage(){//shows previous page pageCUR--; if (pageCUR==0){//checks if on first page document.getElementById('Back').hidden='hidden'; document.getElementById('First').hidden='hidden'; } else{ document.getElementById('Back').hidden=''; document.getElementById('First').hidden=''; } document.getElementById('Next').hidden='' document.getElementById('Last').hidden='' display(); } function firstPage(){//shows first page pageCUR =0; document.getElementById('First').hidden='hidden'; document.getElementById('Back').hidden='hidden'; document.getElementById('Next').hidden=''; document.getElementById('Last').hidden=''; display(); } function lastPage(){//shows last page pageCUR =parseInt(pageMAX); document.getElementById('First').hidden=''; document.getElementById('Back').hidden=''; document.getElementById('Next').hidden='hidden'; document.getElementById('Last').hidden='hidden'; display(); } 

HTML5

  <div class="StatusTable" id="DStatusTable" hidden> <table id='statusTable' border='1'> <thead><tr> <th> NAME</th> <th>STATUS</th> </tr> </thead> <tbody> <tr id="row1"> <td onclick = "play(0)">video 1</td> <td onclick="SET(this,0)" ></td></tr> <tr id="row2"> <td onclick = "play(1)">video 1</td> <td onclick="SET(this,1)" ></td></tr> <tr id="row3"> <td onclick = "play(2)">video 1</td> <td onclick="SET(this,2)" ></td></tr> <tr id="row4"> <td onclick = "play(3)">video 1</td> <td onclick="SET(this,3)" ></td></tr> <tr id="row5"> <td onclick = "play(4)">video 1</td> <td onclick="SET(this,4)" ></td></tr> <tr id="row6"> <td onclick = "play(5)">video 1</td> <td onclick="SET(this,5)" ></td></tr> <tr id="row7"> <td onclick = "play(6)">video 1</td> <td onclick="SET(this,6)" ></td></tr> <tr id="row8"> <td onclick = "play(7)">video 1</td> <td onclick="SET(this,7)" ></td></tr> <tr id="row9"> <td onclick = "play(8)">video 1</td> <td onclick="SET(this,8)" ></td></tr> <tr id="row10"> <td onclick = "play(9)">video 1</td> <td onclick="SET(this,9)" ></td></tr> </tbody> </table> </div> 

and also I have 2 global variables pageCUR and pageMAX, which contain the index of the current page and the index of the maximum (last) page

Answer 1

this is what i ended up using to change my page

Js

  function makePagination(){ var x = document.getElementById('pagination'); var y='|'; for(var i=0; i<=(pageMAX); i++){ y= y+"<a id ='pageNumber"+i+"' onclick='changePage("+ (i+1)+");'>"+(i+1)+"</a>\n "; if(i!=(fileLIST.length/10)) y=y+' | '; } x.innerHTML=y } function changePage(k){ pageCUR = k-1; display(); } 

along with HTML div

  <div id='pagination'></div> 

Answer 2

Here's how you can create pagination in JavaScript (using jQuery): JSFiddle-Example

Note that window.changePage = function ... is just a workaround in JSFiddle to make this function global. Your JScript code to load the next page goes right into it.

 function changePage (page){ alert('change page to ' + page); } function makePagination(n){ for(var i=0; i<=5; i++){ $("<a onclick='changePage("+i+");'>"+i+"</a>").appendTo('#pagination'); if(i!=5) $('#pagination').append(' | '); } } $(document).ready(function () { makePagination(5); // Number of pages }); 

from

 <div id='pagination'></div>​