问题
I'm trying to use pure javascript to make Pagination, show 10 rows per page, I find an example online here is the link and I try to change it to show 10 rows per page , but it seen has some problem , it shows 3 rows from the beginning and it give 12 items after hit the up button , can anyone help me to fix the problem , or any suggestions are welcome , thank you
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>回答1:
You can create an offset variable for the array of data. Rather than starting your loop at 0, start at your offset point.
for example
//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:
You have to do like this :
<!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>
add in your script
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;
}
put in your html for click next or prious
<a href="javascript:next();">next</a>
<a href="javascript:privious();">privious</a>
来源：https://stackoverflow.com/questions/55245541/how-to-use-pure-javascript-to-show-10-rows-data-perpage