论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

javascript读取Json数据并分页显示

文章类别:Javascript | 发表日期:2010-3-6 8:55:24

javascript读取Json数据并分页显示,支持键盘和滚轮翻页
function $(id){return document.getElementById(id);} //定义获取ID的方法
function GotoPage(num){ //跳转页
    Page = num;
    OutputHtml();
}
var PageSize = 9; //每页个数
var Page = 1; //当前页码
function OutputHtml(){
    
    var obj = eval(siteList);  //获取JSON
    var sites = obj.sites;
    
    //获取分页总数
    var Pages = Math.floor((sites.length - 1) / PageSize) + 1;
    if(Page < 1)Page = 1;  //如果当前页码小于1
    if(Page > Pages)Page = Pages; //如果当前页码大于总数
    var Temp = "";
    
    var BeginNO = (Page - 1) * PageSize + 1; //开始编号
    var EndNO = Page * PageSize; //结束编号
    if(EndNO > sites.length) EndNO = sites.length;
    if(EndNO == 0) BeginNO = 0;
    
    if(!(Page <= Pages)) Page = Pages;
    $("total").innerHTML = "Total:<strong class='f90'>" + sites.length + "</strong>&nbsp;&nbsp;Show:<strong class='f90'>" + BeginNO + "-" + EndNO + "</strong>";
    
    //分页
    if(Page > 1 && Page !== 1){Temp ="<a href='javascript:void(0)' onclick='GotoPage(1)'>&lt;&lt;Index</a> <a href='javascript:void(0)' onclick='GotoPage(" + (Page - 1) + ")'>Previous</a>&nbsp;"}else{Temp = "&lt;&lt;Index Previous&nbsp;"};
    
    //完美的翻页列表
    var PageFrontSum = 3; //当页前显示个数
    var PageBackSum = 3; //当页后显示个数
    
    var PageFront = PageFrontSum - (Page - 1);
    var PageBack = PageBackSum - (Pages - Page);
    if(PageFront > 0 && PageBack < 0)PageBackSum += PageFront; //前少后多,前剩余空位给后
    if(PageBack > 0 && PageFront < 0)PageFrontSum += PageBack; //后少前多,后剩余空位给前
    var PageFrontBegin = Page - PageFrontSum;
    if(PageFrontBegin < 1)PageFrontBegin = 1;
    var PageFrontEnd = Page + PageBackSum;
    if(PageFrontEnd > Pages)PageFrontEnd = Pages;
    
    if(PageFrontBegin != 1) Temp += '<a href="javascript:void(0)" onclick="GotoPage(' + (Page - 10) + ')" title="前10页">..</a>';
    for(var i = PageFrontBegin;i < Page;i ++){
        Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + i + ")'>" + i + "</a>";
    }
    Temp += " <strong class='f90'>" + Page + "</strong>";
    for(var i = Page + 1;i <= PageFrontEnd;i ++){
        Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + i + ")'>" + i + "</a>";
    }
    if(PageFrontEnd != Pages) Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + (Page + 10) + ")' title='后10页'>..</a>";
    
    if(Page != Pages){Temp += "&nbsp;&nbsp;<a href='javascript:void(0)' onclick='GotoPage(" + (Page + 1) + ");'>Next</a> <a href='javascript:void(0)' onclick='GotoPage(" + Pages + ")'>Last&gt;&gt;</a>"}else{Temp += "&nbsp;&nbsp;Next Last&gt;&gt;"}
    
    $("pagelist").innerHTML = Temp;
    
    //输出数据
    
    if(EndNO == 0){ //如果为空
        $("content").innerHTML += "<h1>No Images</h1>";
        return;
    }
    var html = "";
        
    for(var i = BeginNO - 1;i < EndNO;i ++){
        html += "<div class='entry'>";
        html += "<a href='" +sites[i].Url+ "' rel='bookmark' title=" +sites[i].Name+ ">";
        html += "<img src='" +sites[i].Pic+ "' width='200' height='170' />";
        html += "<p class='url'><span>" +sites[i].Name+ "</span></p></a>";
        html += "</div>";
        
    }
    $("content").innerHTML = html;
    clickShow(); //调用鼠标点击事件
    
    //键盘左右键翻页
    document.onkeydown=function(e){
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which;
        if(code==37){
            if(Page > 1 && Page !== 1){
                GotoPage(Page - 1);
                
            }
        }
        if(code==39){
            if(Page != Pages){
                GotoPage(Page + 1);
            }
        }
    }
    
    
    //鼠标滚轮翻页
function handle(delta){
    if (delta > 0){
        if(Page > 1 && Page !== 1){
            GotoPage(Page - 1);
        }        
    }
    else{
        if(Page != Pages){
            GotoPage(Page + 1);
        }
    }
}
function wheel(event){
    var delta = 0;
    if (!event) /* For IE. */
        event = window.event;
    if (event.wheelDelta) { /* IE或者Opera. */
        delta = event.wheelDelta / 120;
        /** 在Opera9中,事件处理不同于IE
        */
    if (window.opera)
        delta = -delta;
    } else if (event.detail) { /** 兼容Mozilla. */
    /** In Mozilla, sign of delta is different than in IE.
    * Also, delta is multiple of 3.
    */
    delta = -event.detail / 3;
    }
    /** 如果 增量不等于0则触发
    * 主要功能为测试滚轮向上滚或者是向下
    */
    if (delta)
        handle(delta);
}
/** 初始化 */
if (window.addEventListener)
    /** Mozilla的基于DOM的滚轮事件 **/
    window.addEventListener("DOMMouseScroll", wheel, false);
    /** IE/Opera. */
    window.onmousewheel = document.onmousewheel = wheel;
    
    
}
//获取链接地址和网站名称
function showLink(source){
    var siteUrl = $("siteurl");
    var siteName = $("sitename");
    var description = $("description");
    
    if(source.getAttribute("rel") == "bookmark"){
        var url = source.getAttribute("href");
        var title = source.getAttribute("title");
        siteUrl.innerHTML = "<a href='" + url + "' target='_blank'>"+ url +"</a>";
        siteName.innerHTML = title;
    }
    
}
//鼠标点击事件
function clickShow(){
    var links = $("content").getElementsByTagName("a");
    for(var i=0; i<links.length; i++){
        var url = links[i].getAttribute("href");    
        var title = links[i].getAttribute("title");
        links[i].onclick = function(){
            showLink(this);
            return false;
        }
    }
}
说明:

1、读取外部数据JSON并根据设置分页显示,添加删除酷站都可以在JSON文件里改;

2、点击酷站后,右侧的框里显示网站的地址和名称并带有链接,DESCRIPTION部分偷了个懒没写,需要的可以自己加;

3、支持键盘翻页和鼠标滚轮翻页;

BUG:

1、鼠标滚轮翻页在FF3下会有问题,来回在第一页和最后一页跳;

2、IE6下JS文件不能外调,否则会出错,其它浏览器正常。

上一篇:javascript制作贪吃蛇游戏 人气:3203
下一篇:JavaScript图片切换 人气:6809
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058