1. 将Page类引入。需要自己修改的可自行修改。
package com.puckasoft.video.util
public class Page {
private int num //当前页号, 采用自然数计数 1,2,3,...
private int size//页面大小:一个页面显示多少个数据
private int rowCount//数据总数：一共有多少个数据
private int pageCount// 页面总数
private int startRow//当前页面开始行, 第一行是0行
private int first = 1//第一页 页号
private int last//最后页 页号
private int next//下一页 页号
private int prev//前页 页号
private int start//页号式导航, 起始页号
private int end//页号式导航, 结束页号
private int numCount = 10//页号式导航, 最多显示页号数量为numCount+1这里显示11页。
public Page(int size, String str_num, int rowCount) {
int num = 1
if (str_num != null) {
num = Integer.parseInt(str_num)
}
this.num = num
this.size=size
this.rowCount = rowCount
this.pageCount = (int) Math.ceil((double)rowCount/size)
this.num = Math.min(this.num, pageCount)
this.num = Math.max(1, this.num)
this.startRow = (this.num-1) * size
this.last = this.pageCount
this.next = Math.min( this.pageCount, this.num+1)
this.prev = Math.max(1 , this.num-1)
//计算page 控制
start = Math.max(this.num-numCount/2, first)
end = Math.min(start+numCount, last)
if(end-start <numCount){
start = Math.max(end-numCount, 1)
}
}
// 为了节省篇幅，get,set方法省略。
}
2. 引入fenye.jsp / pagination.jsp文件：
<%@ page language="java" contentType="text/htmlcharset=GBK" pageEncoding="GBK"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=GBK">
</head>
<body>
<%
String url4page = request.getParameter("url4page").trim()
url4page = (url4page.indexOf("?")==-1)?url4page+"?num=":url4page+"&num="
%>
<c:choose>
<c:when test="${page.num != 1}">
<a href="<%=url4page %>${page.first}">首页</a>
<a href="<%=url4page %>${page.prev}">前一页</a>
</c:when>
<c:otherwise>
<b>首页</b>
<b>前一页</b>
</c:otherwise>
</c:choose>
<c:forEach var="i" begin="${page.start}" end="${page.end}" step="1">
<c:choose>
<c:when test="${page.num != i}">
<a href="<%=url4page %>${i}"><b>[${i}]</b>
</a>
</c:when>
<c:otherwise>
<b>[${i}]</b>
</c:otherwise>
</c:choose>
</c:forEach>
<c:choose>
<c:when test="${page.num != page.pageCount}">
<a href="<%=url4page %>${page.next}">后一页</a>
<a href="<%=url4page %>${page.last}">末页</a>
</c:when>
<c:otherwise>
<b>末页</b>
<b>后一页</b>
</c:otherwise>
</c:choose>
共${page.pageCount}页
<br />
</body>
</html>
3. 在相应servlet/jsp 里面，将需要显示的记录放到list里面，并将list放到request或者session里面：相应servlet写法如下：
<%@ page language="java" import="java.util.*" pageEncoding="GBK" %>
<%@ page import="com.puckasoft.video.dao.*,com.puckasoft.video.vo.*,com.puckasoft.video.util.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath()
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body>
<%
//处理总记录数
int rowCount = VideoDao.countAllVideos()
//将Page类放入作用域，以便在jsp页面中显示
Page p1 = new Page(10, request.getParameter("num"), rowCount)
request.setAttribute("page", p1)
//将视频信息放入作用域，以便在页面中显示
List list = VideoDao.listAllVideos(p1.getStartRow(), p1.getSize())
request.setAttribute("vList", list)
%>
<jsp:include flush="true" page="head.jsp"></jsp:include>
<h1>将会列出所有的视频</h1>
<c:forEach items="${requestScope.vList}" var="video">
<a href="display.jsp?vname=${video.vpath}">${video.name}</a><br>
视频标签：${video.label } <br>
视频描述：${video.description } <br>
点击量：${video.count } <br>
作者：${video.userName} <br>
上传时间：${video.createTime} <br><br>
</c:forEach>
<div>
<jsp:include page="fenye.jsp">
<jsp:param name="url4page" value="videos.jsp" />
</jsp:include>
</div>
<jsp:include flush="true" page="foot.jsp"></jsp:include>
</body>
</html>
4. 数据库中查询数据：
public static List listAllVideos(int startRow,int size) {
Connection conn=null
PreparedStatement ps=null
String sql = "select video.id,vpath,name,label,count,description,userName,video.createTime from video join user on user.id=video.userId order by createTime desc limit ?,? "
ResultSet rs = null
List list = new ArrayList()
try {
conn= DBConn.getConnection()
ps = conn.prepareStatement(sql)
ps.setInt(1, startRow)
ps.setInt(2, size)
rs = ps.executeQuery()
while(rs.next()){
com.puckasoft.video.vo.Video video = new com.puckasoft.video.vo.Video(rs.getInt("id"),rs.getString("vpath"),
rs.getString("name"),rs.getString("label"),rs.getString("description"),
rs.getString("userName"),rs.getInt("count"),rs.getTimestamp("createTime"))
list.add(video)
}
} catch (SQLException e) {
e.printStackTrace()
}finally {
DBConn.close(ps, conn)
}
return list
}
public static int countAllVideos(){
Connection conn=null
PreparedStatement ps=null
String sql = "select count(*) from video"
ResultSet rs = null
int count=0
try {
conn= DBConn.getConnection()
ps = conn.prepareStatement(sql)
rs = ps.executeQuery()
while(rs.next()){
count=rs.getInt(1)
}
} catch (SQLException e) {
e.printStackTrace()
}finally {
DBConn.close(ps, conn)
}
return count
}
ajax请求后台拿到json类型的数据后，可以在它的success回调方法中进行动态分页，也就是表格重绘，此时，我们需要得到的数据包括：查询得到的数据、数据总条数、总页数、当前页数，其中前三条可在后台获取，对于当前页数，需要从前端获取点击页数再通过请求传递给后台，后台做完相应处理后再传回给前端。
/**
*
* @param page 当前页
*/
function getData(page){
var schoolid = $("#schoolid option:selected").text()
var apptype = $("#apptype option:selected").text()
var appname = $("#appname").val()
$.ajax({
type : "POST",
url : "pageAjax",
dataType : "json",
data : {'schoolid':schoolid,'apptype':apptype,'page':page,'appname':appname},
success : function(data){
console.log("成功了！"+data)
$("#table").html("")
$(".turn_page").html("")
var str = "<tr><th class='w20'>应用编号</th>"
+"<th class='w15'>学校名称</th>"
+"<th class='w30'>应用名称</th>"
+"<th class='w25'>应用分类</th>"
+"<th class='w10'>应用类型</th></tr>"
for(var i=0i<data.resultList.lengthi++){
str += "<tr οnclick='showAppDetail(this)'><td>"+data.resultList[i].appid+"</td><td>"
+data.resultList[i].schoolid+"</td><td>"+data.resultList[i].appname+"</td><td>"
+data.resultList[i].app_departid+"</td><td>"+data.resultList[i].apptype+"</td></tr>"
}
$("#table").html(str) //重绘table
var pageNum = data.pageNum //获取得到的数据页数
var curPage = data.curPage //获取当前页
str = ""
/*若页数大于1则添加上一页、下一页链接*/
if(data.pageNum>1){
str = "<ul><li><a href='javascript:void(0)οnclick=preEvent()' id='pre' data-num='1'>上一页</a></li>"
}else{
str = "<ul>"
}
/*循环输出每一页的链接*/
for(var i=0i<data.pageNumi++){
str += "<li><a href='javascript:void(0)οnclick=getData("+(parseInt(i)+1)+")' data-type='num'>"+(parseInt(i)+1)+"</a></li>"
}
if(str.indexOf("上一页")>-1){
str += "<li><a href='javascript:void(0)οnclick=nextEvent()' id='next' data-num='1'>下一页</a></li>"
+"<span>共<span id='pageNum'>"+pageNum+"</span>页</span></ul>"
}else{
str += "<span>共<span id='pageNum'>"+pageNum+"</span>页</span></ul>"
}
$(".turn_page").html(str)
//把当前页码存到上一页、下一页的data-num属性中，这样可以在点击上一页或者下一页时知道应该跳到哪页
$("#pre").attr("data-num",curPage)
$("#next").attr("data-num",curPage)
},
error : function(data){
alert("请求失败")
}
})
}
/**
* 上一页点击事件
*/
function preEvent(){
var curPage = $("#pre").attr("data-num")
if(curPage<=1){
$(this).attr('disabled',"true")
}else{
curPage = parseInt(curPage)-1
getData(curPage)
}
}
/**
* 下一页点击事件
*/
function nextEvent(){
var curPage = $("#next").attr("data-num")
var pageNum = $("#pageNum").text()
if(curPage>=pageNum){
$(this).attr('disabled',"true")
}else{
curPage = parseInt(curPage)+1
getData(curPage)
}
}
对应的HTML代码
<div class="table">
<table id="table">
</table>
</div>
<div class="turn_page">
</div>
注意：标签的href属性，如href=”javascript:void(0)οnclick=getData()”
要让原来的点击事件失去响应，重新给它定义点击事件，要给它加上javascript:void(0)这句话，若写的是href=”#”的话，点击默认会跳到页面顶部。
另外，ajax请求数据无刷新翻页是异步请求，所以标签的点击事件要写在它的属性里，如上例，若写在js当中，会造成
页面还没加载出来，事件就已经触发，导致没有任何响应。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）