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 相关文章推荐
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
js图片上传的封装代码
Aug 01 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
JavaScript实现世界各地时间显示
Sep 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
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
Openlayers实现地图全屏显示
2020/09/28 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
Python datetime时间格式化去掉前导0
2014/07/31 Python
Python3实现连接SQLite数据库的方法
2014/08/23 Python
python函数形参用法实例分析
2015/08/04 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
python绘制立方体的方法
2018/07/02 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
Django中FilePathField字段的用法
2020/05/21 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
介绍下Java中==和equals的区别
2013/09/01 面试题
俄语专业职业生涯规划
2014/02/26 职场文书
活动总结的格式
2014/05/07 职场文书
北京天坛导游词
2015/02/12 职场文书
保外就医申请书范文
2015/08/06 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js