展会信息港展会大全

javascript实现json页面分页实例代码
来源:互联网   发布日期:2016-01-28 12:58:35   浏览:3016次  

导读:这篇文章主要介绍了javascript实现json页面分页实例代码,需要的朋友可以参考下下午有个朋友问json 数据怎么分页 就捣鼓了一个东东出来下面直接代码:代码如下:!DOCTYPE html PUBLIC - W3C DTD XHTML ...

这篇文章主要介绍了javascript实现json页面分页实例代码,需要的朋友可以参考下

下午有个朋友问json 数据怎么分页 就捣鼓了一个东东出来

下面直接代码:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script>

var a={"code":1,"list":[{"category1_id":"1","category1_name":"u9152u6c34u996eu6599","category1_intro":"u6e05u51c9u53efu53e3

u7684u9152u6c34u996eu6599","category1_images":"http://www.songcuomen.com/attachments/pro

ductType/2014-01/10/21_1389343628.jpg"},{"category1_id":"2","category1_name":"u7c73u9762u7caeu6cb9","category1_intro":"u5bb6u5eadu5fc5u5907",

"category1_images":"http://www.songcuomen.com/attachments/productType/2014-01/10/21_1389343865.jpg"},{"category1_id":"3","category1_name":"u7f8eu5bb9u6d17u62a4","category1_intro":"u62a4u80a4u5fc5u5907","

category1_images":"http://www.songcuomen.com/attachments/productType/2014-01/10/21_1389343935.jpg"},{"category1_id":"4","category1_name":"u6e05u6d01u6d17u6da4","category1_intro":"u7ed9u60a8u4e00u4e2a

u5e72u51c0u7684u751fu6d3bu73afu5883","category1_images":"http://www.songcuomen.com/attachm

ents/productType/2014-01/10/21_1389343986.jpg"},{"category1_id":"5","category1_name":"u751fu6d3bu7528u54c1","category1_intro":"u5bb6u5eadu5fc5u5907","

category1_images":"http://www.songcuomen.com/attachments/productType/2014-01/10/21_1389344445.jpg"},{"category1_id":"6","category1_name":"u4f11u95f2u98dfu54c1","category1_intro":"u597du5403u7f8eu5473",

"category1_images":"http://www.songcuomen.com/attachments/productType/2014-01/10/21_1389344494.jpg"}]};

var y=1;//表示页数

var t=2;//表示每页现实几条数据

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('已经是第一页了');

f=0;

}

if(y==zy && f==1)

{

alert('已经是最后一页了');

f=0;

}

var otbod=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)*2;//页数-1 乘以每页现实多少条 结果为 本页从第几条开始

for(var i=1;i<3;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]['category1_id'];

otd2.innerHTML=a["list"][q]['category1_name'];

otd3.innerHTML=a["list"][q]['category1_intro'];

otd4.innerHTML=a["list"][q]['category1_images'];

otr.appendChild(otd1);

otr.appendChild(otd2);

otr.appendChild(otd3);

otr.appendChild(otd4);

otbod.appendChild(otr);

if(q==zy)

{

break;

}

q++;

}

}

</script>

</head>

<body>

<tableborder="1" id="table">

<thead>

<tr><td>category1_id</td><td>category1_name</td><td>category1_intro</td><td>category1_images</td></tr>

</thead>

<tbody>

</tbody>

</table>

<a href="javascript:fanye(1);">下一页</a>

<a href="javascript:fanye(-1);">上一页</a>

</body>

</html>

赞助本站

人工智能实验室

相关热词: 分页 json javascript

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港