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 相关文章推荐
JS继承--原型链继承和类式继承
Apr 08 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
vue打包后显示空白正确处理方法
Nov 01 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
在antd Form表单中select设置初始值操作
Nov 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中截取中文字符串的代码小结
2011/07/17 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
Python数据类型之List列表实例详解
2019/05/08 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
以下的初始化有什么区别
2013/12/16 面试题
检察官就职演讲稿
2014/01/13 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
工程承诺书怎么写
2014/05/24 职场文书
节能环保标语
2014/06/12 职场文书
咖啡店创业计划书
2014/08/15 职场文书
2015年加油站工作总结
2015/05/13 职场文书
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js