javascript实现json页面分页实例代码
发布时间:2024-02-25 09:38:56
标签:json,页面分页
下午有个朋友问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>
0
投稿
猜你喜欢
- 一、 升级前准备工作1、 确认数据库版本使用dba登陆查询当前数据库的版本SQL> select * from v$version;
- 在之前的一篇文章我们介绍了《如何向PHP数组中头部和尾部添加元素》既然有添加元素,那么就有删除元素,今天这篇文章详细介绍如何删除数组中的头部
- 前言我们前面对matplotlib模块底层结构学习,对其pyplot类(脚本层)类提供的绘制折线图、柱状图、饼图、直方图等统计图表的相关方法
- 如果你想让你的IIS支持wml,做个wap网站,只需作小小的改变就行了.虽然目前支持wml的虚拟主机极少,但是自己在本机上玩玩也好的.首先在
- 1.预备知识python语言,scrapy爬虫基础,json模块,flask后端2.抓取CSDN数据接口使用谷歌抓包工具抓取CSDN搜索引擎
- 1、为什么淘宝的手机频道页面,竟然会有笔记本、数码相机、随身听,甚至是游戏之类的栏目,而且还有一个“数码·生活”栏目是包括以上这些设备的综合
- 前言在数据库系统原理与设计(第3版)教科书中这样写道:数据库包含4类数据:1.用户数据2.元数据3.索引4.应用元数据其中,元数据也叫数据字
- 如果能,请问如何实现 谢谢set aa=server.cre
- 丢弃现有MySQL的表是很容易的。但是需要非常小心,删除任何现有的一个表后将无法恢复,因为数据丢失。语法:下面是通用的SQL语法丢弃(删除)
- 使用python进行图片处理,现在需要读出图片的任意一块区域,并将其转化为一维数组,方便后续卷积操作的使用。 下面使用两种方法进行处理:co
- 1.scrapy基本了解Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架。可以应用在包括数据挖掘, 信息处理或存储历史数据
- Smarty Smarty的特点是将模板编译成PHP脚本,然后执行这些脚本。很快,非常灵活。 Heyes Template&nbs
- 一、python邮件模块简介email模块属于内置模块,用来自定义邮件的中文、主题、日期、附件等信息;smtplib模块属于内置模块,它对s
- 1、python 操作xml的方式介绍查看全部包含“三种⽅法:⼀是xml.dom. * 模块,它是W3CDOMAPI的实
- 相信大多数人都遇到过多实例安装mysql吧,相信大多数人只要找到一份多实例安装的教程就会很容易搞定了,但是越是顺利的安装过程越让我们不安,为
- 1、概述Golang是一种强类型语言,虽然在代码中经常看到i:=12这种写法,这其实是编译器在编译期间自动做了类型推断。编译器会对数据进行类
- 请问如何在Oracle Setver端检测ODBC是否连接好了?首先,在SQLPLUS安装时勾选oracle open client ada
- 关于 Settings Sync扩展:Settings Sync可以同步你当前的VSCode配置环境,当你需要在其它的电脑工作时,您不用重头
- Python函数库众多,而且在不断更新,所以学习这些函数库最有效的方法,就是阅读Python官方文档。同时借助Google和百度。本文介绍的
- 1、为什么要设置headers?在请求网页爬取的时候,输出的text信息中会出现抱歉,无法访问等字眼,这就是禁止爬取,需要通过反爬机制去解决