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>

赞 (0)

相关推荐

  • 纯JavaScript实现的分页插件实例

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

  • javascript ajax 仿百度分页函数

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

  • 原生javascript实现的分页插件pagenav

    原生javascript实现的分页插件pagenav

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

  • 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实现列表分页功能特效

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

  • 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 支持页码格式的分页类

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

  • 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

  • JavaScript分页功能的实现方法

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

  • 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

随机推荐