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 获取链接(url)参数的方法
Feb 15 Javascript
jQuery 表格工具集
Apr 25 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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设置允许大文件上传示例代码
2014/03/10 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
一个javascript参数的小问题
2008/03/02 Javascript
Div自动滚动到末尾的代码
2008/10/26 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
python3实现高效的端口扫描
2019/08/31 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
python使用Geany编辑器配置方法
2020/02/21 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
详解python tkinter 图片插入问题
2020/09/03 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
小学教师培训方案
2014/06/09 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
运动会100米加油稿
2015/07/21 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技
浅谈Node的内存泄露问题
2022/05/06 NodeJs