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 相关文章推荐
jquery ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
javascript语言结构小记(一)
Sep 10 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 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
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
php 变量未定义等错误的解决方法
2011/01/12 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
Python的SQLAlchemy框架使用入门
2015/04/29 Python
Python字符串对象实现原理详解
2019/07/01 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
次世代生活态度:Hypebeast
2018/07/05 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
广州品高软件.net笔面试题目
2012/04/18 面试题
《大自然的语言》教学反思
2014/04/08 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
护理工作心得体会
2016/01/22 职场文书
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers