javascript实现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>

时间: 2014-02-18

javascript分页代码实例分享(js分页)

调用: 复制代码 代码如下: var pageChange = function (index) {            var html = pager("divid", index, 5, 1000, pageChange, { showGoTo: false, showFirst: false });        } 实现: 复制代码 代码如下: pager = function (divPager, pageIndex, pageSize, totalCount, page

JavaScript分页功能的实现方法

本文实例讲述了JavaScript分页功能的实现方法.分享给大家供大家参考.具体实现方法如下: <script> //定义page为全局变量,以便下面使用 var page; window.onload = function() { var table = document.getElementById("table"); var btnAdd = document.getElementById("btnAdd"); var btnModify = do

纯JavaScript实现的分页插件实例

本文实例讲述了纯JavaScript实现的分页插件.分享给大家供大家参考.具体如下: //总条数(必填) var Num=Number(<?php echo $count;?>) //当前页(必填) var index = Number(<?php echo $page;?>); /* //每页的条数(可选,默认每页10条) */ var pageNum=Number(10); /* //最大显示的页码的数目(可选,默认显示5个页码,页码数目必须大于等于1) */ var maxP

原生javascript实现的分页插件pagenav

这一款是用原生javascript实现的分页插件pagenav,页码显示jquery插件,只需要存在#pageNav,则会在其中显示页码,调用时可根据需要先重写go方法.(已去除jquery依赖).... 插件代码如下: /* ************************** author:Keel (keel.sike@gmail.com) ************************** 页码显示jquery插件,只需要存在#pageNav,则会在其中显示页码. 调用时可根据需要先重

JavaScript EasyPager 分页函数

复制代码 代码如下: var EasyPager = function(wrap,pageCount,currPage){ var d = document ,el = function(tag,inner,click,css){ tag = d.createElement(tag); inner && (tag.innerHTML = inner); click && (tag.onclick = click); css && (tag.className

javascript 支持页码格式的分页类

但是他们插件的附属功能很多又不需要,而且没必要就为了这么一个功能区引用这个库,为速度考虑吧,当然你服务器好也行,但是其实这个效果不是必须的,但是觉的会常用,所以就包装成类了,供以后使用,也供有需要的人学习使用. 下面只是一个简单的demo,用的话自己可以在编辑页码样式,有默认的格式.不废话了,自己看吧,有注释使用说明...类(3kb)使用可以参照demo,不明白使用的可以留言. 以后会慢慢写一些项目开发中常遇到的问题,以及解决方案,和大家学习分享. jpage.js 复制代码 代码如下: /*

javascript实现炫酷的拖动分页

javascript实现炫酷的拖动分页 js <html> <head> <title>拖动分页</title> <meta http-equiv=content-type content="text/html; charset=gb2312"> <style> body{ border:0px; margin:0px; overflow:hidden; background-color:transparent;

javascript ajax 仿百度分页函数

复制代码 代码如下: /** * Ajax分页功能 * 在需要分页的地方添加<ul class="pagination"></ol> * 作为分页组件容器元素. * pageCount 总页数 * currentPage 当前页数 * container 带有pagination类的ol容器元素 * loadData 用于加载数据的函数 * version 1.0 */ pagination : function(pageCount, currentPage,

JavaScript实现列表分页功能特效

最近写了一个js分页的方法,尽管已经有现成的可以用,但还是想自己写写,搞搞清楚.最终实现的效果是:上一页.第一页.-(上n个页码).n个页码.-(下n个页码).最后一页.下一页.n可以是奇数也可以是偶数,一般都喜欢取奇数,星石调用的时候传入的参数是5.写的时候,主要注意了以下几个地方: 页码等于1时,只显示上一页.第一页.最后一页,且都没有跳转: 页码小于等于2时,不需要中间的n个页码: 页码小于等于n时,显示所有页码,不显示2个"-": 2个"-"换页时,换n个页

javascript分页代码(当前页码居中)

复制代码 代码如下: function setPage(opt){ if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum){return false}; var allPageNum = opt.allPageNum; //总的页数 var showPageNum = opt.showPageNum; //显示的页数 var curpageNum = opt.curpag

分页代码

分页代码: <%''本程序文件名为:Pages.asp%> <%''包含ADO常量表文件adovbs.inc,可从"\Program Files\Common Files\System\ADO"目录下拷贝%> <!--#Include File="adovbs.inc"--> <%''*建立数据库连接,这里是Oracle8.05数据库 Set conn=Server.CreateObject("ADODB.Conn

vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)

html代码: <section class="container page-home"> <div id="main-content" class="wrap-container zerogrid"> <article id="news_content" v-for="item in items"> <div class="col-1-2 right&q

Angular.js与Bootstrap相结合实现表格分页代码

先给大家简单介绍angular.js和bootstrap基本概念. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 最近一直学习Angular.js,在学习过程

php分页原理 分页代码 分页类制作教程

分页显示是一种非常常见的浏览和显示大量数据的方法,属于web编程中最常处理的事件之一.对于web编程的老手来说,编写这种代码实在是和呼吸一样自然,但是对于初学者来说,常常对这个问题摸不着头绪,因此特地撰写此文对这个问题进行详细的讲解. 一.分页原理: 所谓分页显示,也就是将数据库中的结果集人为的分成一段一段的来显示,这里需要两个初始的参数: 每页多少条记录($PageSize)?        当前是第几页($CurrentPageID)? 现在只要再给我一个结果集,我就可以显示某段特定的结果出

JSP通用高大上分页代码(超管用)

先给大家展示下分页效果,如果亲们还很满意请参考以下代码. 在超链接中要保留参数 当使用多条件查询后,然后在点击第2 页时,这个第2页超链接没有条件了,所以会丢失条件,所以我们需要在页面上的所有链接都要保留条件! 我们要把条件以一个字符串的形式保存到PageBean的url中!这个任务交给Servlet! pagebean package cn.itcast.cstm.domain; import java.util.List; public class PageBean<T> { privat

js脚本分页代码分享(7种样式)

本文跟大家分享了7种JS脚本分页样式,相信总有一款是适合你的哦 抓紧先上图给大家挑选一下------------------运行效果------------------- 其实小编挺喜欢最后一款的,亲,你呐? 为大家再分享实现JS脚本分页的代码,直接复制代码,运行即可,抓紧试试吧 <html> <head> <title>7种JS脚本分页代码</title> <style> body {font-size: 12px;} /* Pages Mai

JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探

如果你所在公司的开发环境或者项目的开发环境处于单一语言的开发环境之中,框架不适用,因为框架的使用范围之一就是针对一个项目中存在多个语言开发的业务模块,而新项目都需要这些模块的功能,按照以前的习惯,肯定是重新开发,至少也是将其他的语言开发的业务功能变成webservice接口供新代码调用,在这种情况下,本文讨论的框架就可以派上用场并且还能在客户端消除语言差异,只使用纯javascript和html静态代码进行开发. 当然即使在单一的语言环境下,仍然可以使用该模型进行开发,不过开发人员就无法享受到各

php自动适应范围的分页代码

复制代码 代码如下: <?php function page($page,$total,$phpfile,$pagesize=10,$pagelen=7){     $pagecode = '';//定义变量,存放分页生成的HTML     $page = intval($page);//避免非数字页码     $total = intval($total);//保证总记录数值类型正确     if(!$total) return array();//总记录数为零返回空数组     $pages