急求一个jsp+ajax实现分页的例子

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了急求一个jsp+ajax实现分页的例子相关的知识,希望对你有一定的参考价值。

参考技术A 分页实现步骤:
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/html; charset=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/html; charset=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实现的?开玩笑

追答

尴尬,貌似贴错了。就当借鉴一下吧,我们学的是javascript、jsp和servlet。

本回答被提问者采纳

知了堂学习笔记JSP页面数据分页实现——分页概念以及主流数据库的分页查询

一.分页简介

  1.分页,就是一种将数据库里的数据一部分展示给用户的技术。为什么要这样做呢?因为一般来说用户在查询时数据是非常多的,当一个页面不能显示所有数据时,我们就要对查询的数据进行分页,就像我们的书本分成一页一页一样。最简单的例子就是百度,当你百度时,成千上万的数据,并不是呈现在一个页面的。

  

  2.分页的实现方式

    1)假分页(不推荐):什么是假分页呢?假分页就是一次性将数据库里的数据全部取出来,存储在页面中,然后再将数据分别展示出来。这种假分页在数据少的还可以玩玩,当数据多起来的时候,这种方式就爆炸了。由于一次取出的数据太大,会导致你的页面爆炸,点下一页要等很久,用户体验感很差,所以不推荐使用。

    2)真正的分页:真正的分页就是你的页面需要多少数据,就去数据库取多少数据。这种分页就十分灵活了,在对付数据庞大的查询时,有很大的优势。所以我们这次的笔记就使用这样的方式。

二.数据库分页查询

  数据库分页查询,就是根据页面的需要,一次只查询部分的数据,当用户点击下一页的时候就继续查询另外的数据。现在主流的数据库主要有三种:Oracle、MySQL、SQL server,我们接下来就看看,三种数据库对应分页查询的方法。

 1.MySQL——相对来说最简单分页查询

  MySQL的分页查询要用到 limit关键字,方式就是 limit m,n   m表示第几条数据   n表示从m+1开始取多少条数据,比如

    select * from table limit m,n       其中m是指记录开始的index,从0开始,表示第一条记录

    具体:select * from tableName where 条件 limit 当前页码*页面容量-1,页面容量

 2.Oracle 分页

  Oracle分页要用到的关键字是 rownum (行号),我们直接看它的用法

  1)查询表中的前n条记录   : select * from Table where rownum <= n

  2)查询第 n 到第 m 条记录   :select * from (select 表名.*, rownum rn from 表名 where rownum <=m) where rn > n;
      对于这种形式的查询,oracle不像mysql那么方便,它必须使用子查询或者是集合操作来实现。

 3.SQL server的分页

   在分页查询上,我感觉SQL Server比较费劲,没有一个专门的分页的语句,并且每个版本对应的查询方式不一样,比如:  

    1)SQL Server 2000数据库分页
    Select top pagesize * from 表名 where 列名 not  in(select top pagesize*page 列名 from  表名 order by 列名) order by 列名

    2)SQL Server 2005数据库分页(后面的数据分页就大同小异了)
    Select * from (select 列名,row_搜索number() over(order by  列名1) as 别名from 表名) as t where t.列名1>=startrow and t.列名1<=endrow

三.页面的编写

  数据的分页查询学会了,我们就要规划页面如何在页面显示了。一般的网页中,我们都是以表格的样式呈现数据的,所以我们先把jsp页面做好,再去通过编写后台代码让数据呈现在页面上,这里我给出了我们测试的jsp页面:

  效果图:

附上代码:

  

<div class="search">
            <p>申请日期:</p>
            <select id="time">
                <option >选择日期</option>
            </select>
            <input class="button" type="submit" name="" value="查询"></input>
            <div class="tuxin"><img src="../../images/图形化报表.png"> <a href="#">图形报表</a></div>
            <div class="dayin"><img src="../../images/打印机.png"> <a href="#">导出打印</a></div>
            <form>
            <p>采购编号:</p>
            <input type="text" name="">
            <p>材料名称:</p>
            <input type="text" name="">
            <input class="button" type="submit" name="" value="查询"></input>
            <input type="reset" class="button" value="重置" style="background:#e4e1e1;color:#000"></input>
            </form>
        </div>
        <div class="contents">
            <table class="table">
                <tr>
                    <td>申请日期</td>
                    <td>申请人</td>
                    <td>采购员</td>
                    <td>材料编号</td>
                    <td>材料名称</td>
                    <td>规格型号</td>
                    <td>计量单位</td>
                    <td>申请数量</td>
                    <td>备注</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <td>2017/8/7</td>
                    <td>小贤</td>
                    <td>张三</td>
                    <td>1001</td>
                    <td>玻璃</td>
                    <td>100X100X3</td>
                    <td>cm(厘米)</td>
                    <td>1000</td>
                    <td></td>
                    <td><a class="delete" href="#"><img src="../../images/delete_8e.png"></a></td>
                </tr>
            </table>
            <div class="paging">
                <a class="button" href="">上一页</a>
                <a href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
                <a class="button" href="">下一页</a>
                <p><span>5</span>&nbsp;&nbsp;&nbsp;到第</p>
                <input  type="text" name="">
                <p style="margin:2px -1px 0 10px;"></p>
                <input class="button" type="submit" value="确认">
            </div>
        

下章我们就实现JSP页面的分页:

以上是关于急求一个jsp+ajax实现分页的例子的主要内容,如果未能解决你的问题,请参考以下文章

jsp分页的不同实现方法

请高人讲解java ajax实现分页的思路

Django ajax异步请求分页的实现

基于mybatis ajax 分页的实现

java分页的实现(后台工具类和前台jsp页面)

在JSP中如何实现分页技术啊?