maven项目 查询出列表 前台获取的json里边的 total 和rows什么意思

maven项目 查询出列表 前台获取的json里边的 total 和rows什么意思,第1张

total:是记录总数

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/12206016.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-21
下一篇 2023-05-21

发表评论

登录后才能评论

评论列表(0条)

保存