代码
<!DOCTYPE html PUBdivC "-//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>js读取json数据分页显示</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/site.js"></script>
</head>

<body onload="OutputHtml();">
<div class="warp">
<div class="list">
<div id="content"></div>
<div id="pager">
<div id="total"></div>
<div id="pagelist"></div>
</div>
</div>

<div class="detail">
<ul>
<li>URL:</li>
<li id="siteurl" class="mt10"><a href="http://MYKITE.CN">http://MYKITE.CN</a></li>
<li>COMPANY:</li>
<li id="sitename" class="mt10">MYKITE.CN</li>
<li>DESCRIPTION:</li>
<li id="description">illustrates how to implement a nice animated menu using Mootools and some lines of CSS and HTML code ready to reuse in your project.
</li>
</ul>
</div>
</div>

</body>
<script type="text/javascript">
<!--//
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;
}
}
}
//-->
</script>
</html>


site.js为JSON格式的数据  https://files.cnblogs.com/reommmm/jsonsite.rar