如何将分页添加到使用JavaScript开发的动态表中？

Question

如何将分页添加到使用JavaScript开发的动态表中？

function printing_numbers(sum){


    elements =  document.getElementById('OMG3').innerHTML= "";
    if(sum==0){document.getElementById('OMG3').innerHTML= "";}


    if(sum>5){

            for(i=1; i<= sum; i++){

                elements =  
                document.getElementById('OMG3').innerHTML += '<button type="button" onclick="myfun('+i+','+sum+')" id='+i+' style=" margin:1px auto; float:left; padding:5px 5px;" class="inactive">'+i+'</button>';
               document.getElementById('OMG3').style.cssFloat +="left";
               document.getElementById('OMG3').style.border +="0";
               document.getElementById('OMG3').style.backgroundColor +="none"; 
                       }

     }else if(sum > 1){
            for(i=1; i<= sum; i++){
               elements =  

               document.getElementById('OMG3').innerHTML += '<button type="button" onclick="myfun('+i+','+sum+')" id='+i+' style=" margin:1px auto; float:left; padding:5px 5px;" class="inactive">'+i+'</button>';
               document.getElementById('OMG3').style.cssFloat +="left"; 
               document.getElementById('OMG3').style.border +="0";
               document.getElementById('OMG3').style.backgroundColor +="none";

            }

    }
}

Answer 1

签出这个免费的jQuery库，它将执行您想要做的所有事情，以及更多： https : //datatables.net/examples/basic_init/multi_col_sort.html

它通过从DOM传递普通的HTML表，然后将其转换为动态表来工作。

您还可以在其中添加您将赢得的样式以使其适合您的站点，这是Bootstrap 3的实现： https : //datatables.net/examples/styling/bootstrap.html

（很抱歉仅提供链接，发表评论可能会有点长）

Answer 2

基本思想是一次仅显示内容的一部分。 这意味着您需要将当前页码和显示的数据量存储在某个位置（例如，URL作为参数）。

例如伪代码

//let's say that you have your result array stored in the variable "results"
var page = 1; //first page
var amount = 20; //the amount of results to be shown

现在，当您显示结果时

for(var i=0; i<results.length; i++){
    if(i < page*amount && i <= page*amount - amount){
        resultsToShow.push(results[i]);
    }
}
showResults(resultsToShow);

对于分页按钮，您只需要增加或减少page变量。