How To Use Pure Javascript To Show 10 Rows Data Perpage?
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
Solution 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 pagefunctiongetData(pageIndex,resultsPerPage){
var offset=pageIndex*resultsPerPage;//page 2=10, page 3=20;var limit=offset+resultsPerPage;
var results='';
//loop through datafor (var i= offset; i < limit; i++){
//generate results from a[i]
}
return results;
}
Solution 2:
You have to do like this :
<!DOCTYPE html><html><head><metacharset="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);
}
functionnext() {
start=start+1;
if((start*10)> a["list"].length){
start=start-1;
}
else{
getData(start,10);
}
}
functionprivious() {
start=start-1;
if(start < 0){
start=start+1
}
else{
getData(start,10);
}
}
functiongetData(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 datafor (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><tableborder="1"id="table"><thead><tr><td>name</td><td>age</td><td>height</td></tr></thead><tbody></tbody></table><ahref="javascript:next();">next</a><ahref="javascript:privious();">privious</a></body></html>add in your script
var start=0;
window.onload=function (){
getData(start,10);
}
functionnext() {
start=start+1;
if((start*10)> a["list"].length){
start=start-1;
}
else{
getData(start,10);
}
}
functionprivious() {
start=start-1;
if(start < 0){
start=start+1
}
else{
getData(start,10);
}
}
functiongetData(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 datafor (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
<ahref="javascript:next();">next</a><ahref="javascript:privious();">privious</a>
Post a Comment for "How To Use Pure Javascript To Show 10 Rows Data Perpage?"