Question

json数据已经拿到了 前台怎么进行分页

Answer 1

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 = 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 += " <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 - 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、支持键盘翻页和鼠标滚轮翻页；