rows:就昌烂拦标识行了 那个大括号中的东西就是行显示内容
比如你rows里面再包含一个大括号包含id、title这些信息历哪那就是说明有两条记录,显示在页面是两行,每行显示的就是大括号耐胡中的那四个信息。total就是2
jsp页面分页显示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> Show:<strong class='f90'>" + BeginNO + "-" + EndNO + "</strong>"
//分页
if (Page >1 &&Page !== 1) {
Temp = "<a href='javascript:void(0)' onclick='GotoPage(1)'><<Index</a><a href='javascript:void(0)' onclick='GotoPage(" + (Page - 1) + ")'>Previous</a>"
} else {
Temp = "<<Index Previous "
}
//完美的翻页列表
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 = PageFrontBegini <Pagei++) {
Temp += " <a href='javascript:void(0)' onclick='孙拍GotoPage(" + i + ")'>" + i + "</a>"
}
Temp += " <strong class='f90'>"拦歼 + Page + "</strong>"
for (var i = Page + 1i <= PageFrontEndi++) {
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 += " <a href='javascript:void(0)' onclick='GotoPage(" + (Page + 1) + ")'>Next</a><a href='javascript:void(0)' onclick='GotoPage(" + Pages + ")'>Last>></a>"
} else {
Temp += " Next Last>>"
}
$("pagelist").innerHTML = Temp
//输出数据
if (EndNO == 0) { //如果为空
$("content").innerHTML += "<h1>No Images</h1>"
return
}
var html = ""
for (var i = BeginNO - 1i <EndNOi++) {
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 = 0i <links.lengthi++) {
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、支持键盘翻页和鼠标滚轮翻页;
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)