Как использовать чистый JavaScript, чтобы показать 10 строк данных на страницу? - PullRequest
Новая
       16

Как использовать чистый JavaScript, чтобы показать 10 строк данных на страницу?

0 голосов
/ 19 марта 2019

Я пытаюсь использовать чистый javascript для разбиения на страницы, показывать 10 строк на странице, я нахожу пример онлайн , вот ссылка , и я пытаюсь изменить ее, чтобы показывать 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>

Ответы [ 2 ]

0 голосов
/ 19 марта 2019

Вы должны сделать так: 


<!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 для клика на следующий или prious 

<a href="javascript:next();">next</a>
<a href="javascript:privious();">privious</a>
0 голосов
/ 19 марта 2019

Вы можете создать переменную смещения для массива данных.Вместо того, чтобы начинать цикл с 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;

}
...