javascript实现json页面分页实例代码


Posted in Javascript onFebruary 20, 2014

下午有个朋友问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":"\u9152\u6c34\u996e\u6599","category1_intro":"\u6e05\u51c9\u53ef\u53e3\u7684\u9152\u6c34\u996e\u6599","category1_images":"http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389343628.jpg"},{"category1_id":"2","category1_name":"\u7c73\u9762\u7cae\u6cb9","category1_intro":"\u5bb6\u5ead\u5fc5\u5907","category1_images":"http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389343865.jpg"},{"category1_id":"3","category1_name":"\u7f8e\u5bb9\u6d17\u62a4","category1_intro":"\u62a4\u80a4\u5fc5\u5907","category1_images":"http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389343935.jpg"},{"category1_id":"4","category1_name":"\u6e05\u6d01\u6d17\u6da4","category1_intro":"\u7ed9\u60a8\u4e00\u4e2a\u5e72\u51c0\u7684\u751f\u6d3b\u73af\u5883","category1_images":"http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389343986.jpg"},{"category1_id":"5","category1_name":"\u751f\u6d3b\u7528\u54c1","category1_intro":"\u5bb6\u5ead\u5fc5\u5907","category1_images":"http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389344445.jpg"},{"category1_id":"6","category1_name":"\u4f11\u95f2\u98df\u54c1","category1_intro":"\u597d\u5403\u7f8e\u5473","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>
<table  border="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>
Javascript 相关文章推荐
深入理解javaScript中的事件驱动
May 21 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 #Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 #Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 #Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 #Javascript
js获取指定的cookie的具体实现
Feb 20 #Javascript
js获取和设置属性的方法
Feb 20 #Javascript
js控制浏览器全屏示例代码
Feb 20 #Javascript
You might like
Php header()函数语法及使用代码
2013/11/04 PHP
PHP多线程类及用法实例
2014/12/03 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
深入了解Python数据类型之列表
2016/06/24 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
python算法表示概念扫盲教程
2017/04/13 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
Ajax和javascript的区别
2013/07/20 面试题
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
社区志愿者活动总结
2014/06/26 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
Python机器学习之逻辑回归
2021/05/11 Python
Java设计模式之享元模式示例详解
2022/03/03 Java/Android
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript