如何使用纯 javascript 每页显示 10 行数据? [英] How to use pure javascript to show 10 rows data perpage?
问题描述
我正在尝试使用纯javascript进行分页，每页显示10行，我在网上找到了一个例子这里是链接，我尝试将其更改为每页显示 10 行，但它看到了一些问题，它从一开始就显示了 3 行，并且在点击后给出了 12 个项目向上按钮，任何人都可以帮我解决问题，或者欢迎任何建议，谢谢
var a = {列表": [{name: "Wang1",年龄:30"，身高:182"}, {name: "文1",年龄:28"，身高:155"}, {name: "Yang1",年龄:45"，身高:171"}, {name: "Wang2",年龄:30"，身高:182"}, {name: "文2",年龄:28"，身高:155"}, {name: "Yang2",年龄:45"，身高:171"}, {name: "Wang3",年龄:30"，身高:182"}, {name: "文3",年龄:28"，身高:155"}, {name: "Yang3",年龄:45"，身高:171"}, {name: "Wang4",年龄:30"，身高:182"}, {name: "文4",年龄:28"，身高:155"}, {name: "Yang4",年龄:45"，身高:171"}, {name: "Wang5",年龄:30"，身高:182"}, {name: "文5",年龄:28"，身高:155"}, {name: "Yang5",年龄:45"，身高:171"}, {name: "Wang6",年龄:30"，身高:182"}, {name: "文6",年龄:28"，身高:155"}, {name: "Yang6",年龄:45"，身高:171"}]};变量 y = 1;//表示页面无功 t = 10;//每页项目var z = a["list"].length;var zy = Math.ceil(z/t);window.onload = 函数(){范爷(0);}函数fanye(f) {如果 (y == 1 && f == -1) {alert('第一页');f = 0;}如果 (y == zy && f == 1) {alert('最后一页');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);如果(q == zy){休息;}q++;}}<头><tr><td>名称</td><td>年龄</td><td>高度</td></tr></thead></tbody>
<a href="javascript:fanye(1);">up</a><a href="javascript:fanye(-1);">down</a>你必须这样做:
<预><代码><!DOCTYPE html><头><meta charset="utf-8"/><脚本>var a={列表":[{name:"Wang1",年龄:1"，身高:182"},{name:"文1",年龄:2"，高度:155"},{name:"Yang1",年龄:"3",高度:171"},{name:"Wang2",年龄:4"，身高:182"},{name:"文2",年龄:5"，高度:155"},{name:"Yang2",年龄:6"，高度:171"},{name:"Wang3",年龄:7"，身高:182"},{name:"文3",年龄:"8",高度:155"},{name:"Yang3",年龄:"9",高度:171"},{name:"Wang4",年龄:10"，身高:182"},{name:"文4",年龄:11"，高度:155"},{name:"Yang4",年龄:12"，高度:171"},{name:"Wang5",年龄:13"，身高:182"},{name:"文5",年龄:14"，高度:155"},{name:"Yang5",年龄:15"，高度:171"},{name:"Wang6",年龄:16"，身高:182"},{name:"文6",年龄:17"，高度:155"},{name:"Yang6",年龄:18"，高度:171"},{name:"Wang1",年龄:19"，身高:182"},{name:"文1",年龄:20"，高度:155"},{name:"Yang1",年龄:21"，高度:171"},{name:"Wang2",年龄:22"，身高:182"},{name:"文2",年龄:23"，高度:155"},{name:"Yang2",年龄:24"，高度:171"},{name:"Wang3",年龄:25"，身高:182"},{name:"文3",年龄:26"，高度:155"},{name:"Yang3",年龄:27"，高度:171"},{name:"Wang4",年龄:28"，身高:182"},{name:"文4",年龄:29"，高度:155"},{name:"Yang4",年龄:30"，高度:171"},{name:"Wang5",年龄:31"，身高:182"},{name:"文5",年龄:32"，高度:155"},{name:"Yang5",年龄:33"，高度:171"},{name:"Wang6",年龄:30"，身高:182"},{name:"文6",年龄:28"，高度:155"},{name:"Yang6",年龄:45"，高度:171"}]};变量开始=0；window.onload=function (){获取数据(开始，10)；}功能下一个(){开始=开始+1；if((start*10)> a["list"].length){开始=开始-1；}别的{获取数据(开始，10)；}}函数私有(){开始=开始-1；如果(开始<0){开始=开始+1}别的{获取数据(开始，10)；}}函数 getData(pageIndex,resultsPerPage){var offset=pageIndex*resultsPerPage;//第2页=10，第3页=20；var limit=offset+resultsPerPage;变量结果='';var otbod=document.getElementById('table').tBodies[0];otbod.innerHTML = "";//循环数据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);}返回结果；}<身体><表格边框="1" id="表格"><头><tr><td>姓名</td><td>年龄</td><td>身高</td></tr></thead>
</tbody><a href="javascript:next();">next</a><a href="javascript:privious();">privious</a></html>加入你的脚本
var start=0;window.onload=function (){获取数据(开始，10)；}功能下一个(){开始=开始+1；if((start*10)> a["list"].length){开始=开始-1；}别的{获取数据(开始，10)；}}函数私有(){开始=开始-1；如果(开始<0){开始=开始+1}别的{获取数据(开始，10)；}}函数 getData(pageIndex,resultsPerPage){var offset=pageIndex*resultsPerPage;//第2页=10，第3页=20；var limit=offset+resultsPerPage;变量结果='';var otbod=document.getElementById('table').tBodies[0];otbod.innerHTML = "";//循环数据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);}返回结果；}输入您的 html 以供点击下一步或普赖斯
<a href="javascript:next();">next</a><a href="javascript:privious();">privious</a>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>
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>
这篇关于如何使用纯 javascript 每页显示 10 行数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
登录 关闭
