如何使用纯 JavaScript 每页显示 10 行数据？答案

【问题标题】：How to use pure javascript to show 10 rows data perpage?如何使用纯 JavaScript 每页显示 10 行数据？
【发布时间】：2019-08-10 05:57:47
【问题描述】：

我正在尝试使用纯 javascript 进行分页，每页显示 10 行，我在网上找到了一个示例 here is the link 我尝试将其更改为每页显示 10 行，但它看到了一些问题，它从头开始显示 3 行，点击向上按钮后显示 12 项，谁能帮我解决问题，或者欢迎任何建议，谢谢

var a = {
  "list": [{
    name: "Wang1",
    age: "30",
    height: "182"
  }, {
    name: "Wen1",
    age: "28",
    height: "155"
  }, {
    name: "Yang1",
    age: "45",
    height: "171"
  }, {
    name: "Wang2",
    age: "30",
    height: "182"
  }, {
    name: "Wen2",
    age: "28",
    height: "155"
  }, {
    name: "Yang2",
    age: "45",
    height: "171"
  }, {
    name: "Wang3",
    age: "30",
    height: "182"
  }, {
    name: "Wen3",
    age: "28",
    height: "155"
  }, {
    name: "Yang3",
    age: "45",
    height: "171"
  }, {
    name: "Wang4",
    age: "30",
    height: "182"
  }, {
    name: "Wen4",
    age: "28",
    height: "155"
  }, {
    name: "Yang4",
    age: "45",
    height: "171"
  }, {
    name: "Wang5",
    age: "30",
    height: "182"
  }, {
    name: "Wen5",
    age: "28",
    height: "155"
  }, {
    name: "Yang5",
    age: "45",
    height: "171"
  }, {
    name: "Wang6",
    age: "30",
    height: "182"
  }, {
    name: "Wen6",
    age: "28",
    height: "155"
  }, {
    name: "Yang6",
    age: "45",
    height: "171"
  }]
};

var y = 1; //indicate page
var t = 10; //items per page
var z = a["list"].length;
var zy = Math.ceil(z / t);
window.onload = function() {
  fanye(0);
}

function fanye(f) {
  if (y == 1 && f == -1) {
    alert('first page');
    f = 0;
  }
  if (y == zy && f == 1) {
    alert('last page');
    f = 0;
  }


  varotbod = document.getElementById('table').tBodies[0];
  var s = otbod.rows.length;

  for (i = 0; i < s; i++) {

    otbod.removeChild(otbod.rows[0]);
  }
  y += f;
  var q = (y - 1) * 6;
  for (var i = 1; i < z; i++) {

    var otr = document.createElement('tr');
    var otd1 = document.createElement('td');
    var otd2 = document.createElement('td');
    var otd3 = document.createElement('td');
    var otd4 = document.createElement('td');
    otd1.innerHTML = a["list"][q]['name'];
    otd2.innerHTML = a["list"][q]['age'];
    otd3.innerHTML = a["list"][q]['height'];

    otr.appendChild(otd1);
    otr.appendChild(otd2);
    otr.appendChild(otd3);

    otbod.appendChild(otr);
    if (q == zy) {
      break;
    }
    q++;
  }
}

<table border="1" id="table">
  <thead>
    <tr>
      <td>name</td>
      <td>age</td>
      <td>height</td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<a href="javascript:fanye(1);">up</a>
<a href="javascript:fanye(-1);">down</a>

【问题讨论】：

您的 js 代码中有文本 enter code here。这不是有效的 java 脚本，如果您不想删除它，应将其更改为注释。

标签： javascript json pagination

【解决方案1】：

您可以为数据数组创建一个偏移变量。与其从 0 开始循环，不如从偏移点开始。

例如

//pageIndex=0 for first page
function getData(pageIndex,resultsPerPage){

  var offset=pageIndex*resultsPerPage;//page 2=10, page 3=20;
  var limit=offset+resultsPerPage;
  var results='';       

   //loop through data
   for (var i= offset; i < limit; i++){
    //generate results from a[i]
   }

   return results;

}

【讨论】：

【解决方案2】：

你必须这样做：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script>
        var a={"list":[
            {
                name:"Wang1",
                age:"1",
                height:"182"
            },{
                name:"Wen1",
                age:"2",
                height:"155"
            },
            {
                name:"Yang1",
                age:"3",
                height:"171"
            },
            {
                name:"Wang2",
                age:"4",
                height:"182"
            },
            {
                name:"Wen2",
                age:"5",
                height:"155"
            },
            {
                name:"Yang2",
                age:"6",
                height:"171"
            },
            {
                name:"Wang3",
                age:"7",
                height:"182"
            },
            {
                name:"Wen3",
                age:"8",
                height:"155"
            },
            {
                name:"Yang3",
                age:"9",
                height:"171"
            },
            {
                name:"Wang4",
                age:"10",
                height:"182"
            },
            {
                name:"Wen4",
                age:"11",
                height:"155"
            },
            {
                name:"Yang4",
                age:"12",
                height:"171"
            },
            {
                name:"Wang5",
                age:"13",
                height:"182"
            },
            {
                name:"Wen5",
                age:"14",
                height:"155"
            },
            {
                name:"Yang5",
                age:"15",
                height:"171"
            },
            {
                name:"Wang6",
                age:"16",
                height:"182"
            },
            {
                name:"Wen6",
                age:"17",
                height:"155"
            },
            {
                name:"Yang6",
                age:"18",
                height:"171"
            },
            {
                name:"Wang1",
                age:"19",
                height:"182"
            },{
                name:"Wen1",
                age:"20",
                height:"155"
            },
            {
                name:"Yang1",
                age:"21",
                height:"171"
            },
            {
                name:"Wang2",
                age:"22",
                height:"182"
            },
            {
                name:"Wen2",
                age:"23",
                height:"155"
            },
            {
                name:"Yang2",
                age:"24",
                height:"171"
            },
            {
                name:"Wang3",
                age:"25",
                height:"182"
            },
            {
                name:"Wen3",
                age:"26",
                height:"155"
            },
            {
                name:"Yang3",
                age:"27",
                height:"171"
            },
            {
                name:"Wang4",
                age:"28",
                height:"182"
            },
            {
                name:"Wen4",
                age:"29",
                height:"155"
            },
            {
                name:"Yang4",
                age:"30",
                height:"171"
            },
            {
                name:"Wang5",
                age:"31",
                height:"182"
            },
            {
                name:"Wen5",
                age:"32",
                height:"155"
            },
            {
                name:"Yang5",
                age:"33",
                height:"171"
            },
            {
                name:"Wang6",
                age:"30",
                height:"182"
            },
            {
                name:"Wen6",
                age:"28",
                height:"155"
            },
            {
                name:"Yang6",
                age:"45",
                height:"171"
            }]};

        var start=0;
        window.onload=function (){
            getData(start,10);
        }

        function next() {
            start=start+1;
            if((start*10)> a["list"].length){
                start=start-1;
            }
            else{
                getData(start,10);
            }
        }
        function privious() {
            start=start-1;
            if(start < 0){
                start=start+1
            }
            else{
                getData(start,10);
            }
        }

        function getData(pageIndex,resultsPerPage){

            var offset=pageIndex*resultsPerPage;//page 2=10, page 3=20;
            var limit=offset+resultsPerPage;
            var results='';

            var otbod=document.getElementById('table').tBodies[0];
            otbod.innerHTML = "";
            //loop through data
            for (var i= offset; i < limit; i++){

                var otr=document.createElement('tr');
                var otd1=document.createElement('td');
                var otd2=document.createElement('td');
                var otd3=document.createElement('td');
                var otd4=document.createElement('td');
                otd1.innerHTML=a["list"][i]['name'];
                otd2.innerHTML=a["list"][i]['age'];
                otd3.innerHTML=a["list"][i]['height'];

                otr.appendChild(otd1);
                otr.appendChild(otd2);
                otr.appendChild(otd3);

                otbod.appendChild(otr);
            }

            return results;

        }
    </script>
</head>
<body>
<table  border="1" id="table">
    <thead>
    <tr><td>name</td><td>age</td><td>height</td>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<a href="javascript:next();">next</a>
<a href="javascript:privious();">privious</a>
</body>
</html>

添加你的脚本

var start=0;
        window.onload=function (){
            getData(start,10);
        }

        function next() {
            start=start+1;
            if((start*10)> a["list"].length){
                start=start-1;
            }
            else{
                getData(start,10);
            }
        }
        function privious() {
            start=start-1;
            if(start < 0){
                start=start+1
            }
            else{
                getData(start,10);
            }
        }

        function getData(pageIndex,resultsPerPage){

            var offset=pageIndex*resultsPerPage;//page 2=10, page 3=20;
            var limit=offset+resultsPerPage;
            var results='';

            var otbod=document.getElementById('table').tBodies[0];
            otbod.innerHTML = "";
            //loop through data
            for (var i= offset; i < limit; i++){

                var otr=document.createElement('tr');
                var otd1=document.createElement('td');
                var otd2=document.createElement('td');
                var otd3=document.createElement('td');
                var otd4=document.createElement('td');
                otd1.innerHTML=a["list"][i]['name'];
                otd2.innerHTML=a["list"][i]['age'];
                otd3.innerHTML=a["list"][i]['height'];

                otr.appendChild(otd1);
                otr.appendChild(otd2);
                otr.appendChild(otd3);

                otbod.appendChild(otr);
            }

            return results;

        }

输入您的 html 以单击下一步或上一级

<a href="javascript:next();">next</a>
<a href="javascript:privious();">privious</a>

【讨论】：