Javascript 分页表的动态索引

我正在创建一个分页的表（每页仅显示10个元素）。我不确定这个表有多大，因为用户正在动态添加它。我希望有对应于表中页面的数字，当用户单击其中一个页面时，它会加载该页面的元素。我还想显示用户当前所在的页面。 目前，我有一个整数来跟踪用户所在的页面，一个下一步、第一步和最后一步按钮。

---

我真正需要知道的是如何创建一组可点击的动态数字。 我使用的是chrome浏览器、HTML5和JS

先发制人

Java脚本

       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();
    }                   

function display（）{//显示状态表
document.getElementById（“DStatusTable”）.hidden=''；
document.getElementById（“按钮”）.hidden=''；
var table=document.getElementById（'statusTable'）；
对于（变量i=1；ifileLIST.length））{
x[0]。innerHTML=文件列表[pageCUR*10+（i-1）]
[0]。名称；
x[1]。innerHTML=fileLIST[pageCUR*10+
（i-1）][1]；
}
否则{
table.rows[i].hidden='hidden'；
}
函数nextPage（）{//显示下一页
pageCUR++；
if（pageCUR>=parseInt（pageMAX））{//检查是否在最后一页
document.getElementById（'Next'）.hidden（'hidden'）；
document.getElementById（'Last'）.hidden='hidden'；}
否则{
document.getElementById（'Next'）。hidden=''；
document.getElementById（'Last'）。hidden=''；
}
document.getElementById（'Back'）。hidden=''；
document.getElementById（'First'）。hidden=''；
显示（）；
}
函数backPage（）{//显示上一页
pageCUR--；
if（pageCUR==0）{//检查是否在第一页
document.getElementById（'Back'）.hidden（'hidden'）；
document.getElementById（'First'）.hidden='hidden'；
}        
否则{
document.getElementById（'Back'）。hidden=''；
document.getElementById（'First'）。hidden=''；
}
document.getElementById（'Next'）。hidden=''
document.getElementById（'Last'）。hidden=''
显示（）；
}
函数firstPage（）{//显示第一页
pageCUR=0；
document.getElementById（'First'）.hidden='hidden'；
document.getElementById（'Back'）.hidden（'hidden'）；
document.getElementById（'Next'）。hidden=''；
document.getElementById（'Last'）。hidden=''；
显示（）；
}
函数lastPage（）{//显示最后一页
pageCUR=parseInt（pageMAX）；
document.getElementById（'First'）。hidden=''；
document.getElementById（'Back'）。hidden=''；
document.getElementById（'Next'）.hidden（'hidden'）；
document.getElementById（'Last'）.hidden='hidden'；
显示（）；
}                   

HTML5

名称
地位
视频1
视频1
视频1
视频1
视频1
视频1
视频1
视频1
视频1
视频1

---

我还有两个全局变量pageCUR和pageMAX，它们保存当前页面的索引和max（最后一个）页面的索引。这就是在JavaScript中生成分页的方式（使用jQuery）：

请注意，

window.changePage=function…

只是JSFIDLE中使该函数全局化的一个变通方法。加载下一页的JScript代码直接进入其中

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
});

功能更改页（第页）{
警报（将页面更改为“+页面）；
}
函数makePagination（n）{
对于（var i=0；i这就是我最后用来更改页面的内容

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();
    }

函数makePagination（）{
var x=document.getElementById（'pagination'）；
变量y=“|”；
对于（var i=0；i）“我真正需要知道的是如何创建一组可点击的动态数字”->这个答案有什么问题？请解释一下！这个答案没有什么问题，只是有些语法对我不起作用。这让我想到了我想做的事情，谢谢你。Sry这是我的第一篇文章。这是基于html5和JS的（正如标签所说）.我在网上查找，只是希望有人能给我一个大致的指导，告诉我如何开始。
<div id='pagination'></div>​

    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();
    }

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