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变量。

如何为我在javascript中开发的动态表添加分页？

2 个答案: