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 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
最佳JS代码编写的14条技巧
Jan 09 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
原生js实现简单轮播图
Oct 26 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
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
php 常用字符串函数总结
2008/03/15 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
js中开关变量使用实例
2017/02/24 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
Python中的高级数据结构详解
2015/03/27 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
python将unicode和str互相转化的实现
2020/05/11 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
syb养殖创业计划书
2014/01/09 职场文书
护士节策划方案
2014/05/19 职场文书
健康状况证明模板
2014/10/23 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
python 中yaml文件用法大全
2021/07/04 Python
Ajax实现三级联动效果
2021/10/05 Javascript