实现html页面的分页查询,请问如何用jquery

实现html页面的分页查询,请问如何用jquery,第1张

动态的Ajax分页,代码如下:

<%@ page language="java" contentType="text/html charset=utf-8"

pageEncoding="utf-8"%>

<%

String path = request.getContextPath()

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"

%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<base href="<%=basePath %>" />

<meta http-equiv="Content-Type"

content="text/html charset=ISO-8859-1">

<title>Insert title here</title>

<script type="text/javascript" src="scripts/jquery-1.5.1.js"></script>

<script type="text/javascript">

var list // the list of data

var totalPages // the total of pages

var pageSize = 5 // each size of page

var pageIndex = 1 // the index of current page

$(function(){

send()

})

function send() {

$.ajax({

url: "DistrictServlet",

type: "POST",

data: {"function":"list"},

dataType: "json",

success: function(data) {

// list = data

var records  = data.length

if (records % pageSize == 0) {

totalPages = records / pageSize

} else {

totalPages = Math.round(records / pageSize)

}

$("#pageIndex").html(pageIndex)

$("#totalPages").html(totalPages)

binding(data)

}

})

}

function changePage() {

$.ajax({

url: "DistrictServlet",

type: "post",

data: {"function":"list"},

dataType: "json",

success: function(data) {

binding(data)

}

})

}

function binding(data) {

var start = (pageIndex - 1) * pageSize

var end = pageIndex * pageSize

var html = ""

$.each(data, function(index, district) {

if (index >= start && index < end) {

// show data

html += "<tr><td>" + district["id"]+ "</td><td>" +district["name"]+"</td></tr>" // .........

}

})

$("table").html(html)

$("#pageIndex").html(pageIndex)

}

function nextPage() {

pageIndex += 1

if (pageIndex > totalPages) {

pageIndex = totalPages

return

}

changePage()

}

function lastPage() {

pageIndex -= 1

if (pageIndex < 1) {

pageIndex = 1

return

}

changePage()

}

function skipPage(index) {

pageIndex = index

changePage()

}

</script>

</head>

<body>

<div><span id="pageIndex"></span>/<span id="totalPages"></span></div>

<div>

<a href="javascript: lastPage()">last</a>

<a href="javascript: nextPage()">next</a>

</div>

<div id="list"><table></table></div>

</body>

</html>

整体简介:

使用浏览器的查看网页源代码功能可以查看当前页面的HTML和CSS源代码

工具原料:

IE,360极速浏览器,或任一一款浏览器均可

解决方法:

以360极速浏览器为例

打开任意一网站页面,然后在页面的空白处右击,在d出的菜单中选择查看源代码

在新打开的源代码页面中可以看见CSS文件的引用。

点击该CSS文件的链接就可以打开CSS文件进行查看。

先确定一个简单的事实:html所有内容都是明文,别人只要右键点一下源代码就能看见代码内容。你想匹配账号密码来验证,但你有没有考虑过,对应的密码就写在页面里面呢,而且别人压根不需要账号密码,因为所有人的工资表格都在源文件里用明文写着呢。根本不需要账号密码,只要查看源代码就能看到明文的表格。你设置的表格不显示是相对于屏幕显示而言,源代码是永远公开的,别人只需要简单的右键→源代码即可查看。而且你第4列是否查看过压根无法实现,只用html加js是实现不了的,因为没有数据库存储状态,js目前只能实现本地存储,我电脑页面上显示看过,别人电脑上就不能显示了。屏蔽右键点击这么小儿科的想法就不用了,关掉js运行功能,什么浏览器都能点出右键菜单来。

建议:打好基础,把理论学扎实,用数据库老老实实实现账户功能。


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

原文地址:https://54852.com/zaji/7339223.html

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

发表评论

登录后才能评论

评论列表(0条)

    保存