java web常用到的ajax分页思路

有时候其实用同步的分页可以在url上记录页数 这样把链接分享给别人的时候可以直接到那一页
当然 这里用的是ajax的分页 自己写的一个简单的小demo 没有链接数据库 自己初始化的一个list 代码如下

因为是用的纯servlet+jsp 没用任何别的框架 所以写了2个servlet

第一个servlet

package com.controller;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.entity.Page;

public class PageController extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		/**
		 * 跳转到分页页面 两种方法：1.现在就把page的第一页带入进去 2.跳转直接到页面通过自定义标签带过去
		 */
		Page page = new Page();
		List al = new ArrayList();
		for (int i = 0; i < 3; i++) {
			al.add("name" + i);
		}
		page.setParam(0, 10, 3, al);
		String display = "<a>第1页</a>"+"&nbsp;&nbsp;"+"<a onclick=\"ajaxpage('1')\">下一页</a>";
		page.setDisplay(display);
		req.setAttribute("page", page);
		req.getRequestDispatcher("page.jsp").forward(req, resp);
	}
}

第二个servlet

package com.controller;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.entity.Page;

public class AjaxPageController extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
			String pageno = req.getParameter("currentPage");
			String pageSize = req.getParameter("pageSize");
			String totleSize = req.getParameter("totleSize");
			long pageno_ = Integer.valueOf(pageno);
			long totleSize_ = Integer.valueOf(totleSize);
			int pageSize_ = Integer.valueOf(pageSize);
			
			List date = new ArrayList();
			for(long i=pageno_*pageSize_;i<totleSize_;i++){
				date.add("name"+i);
				// 如果够了那么多个就返回
				if(date.size()==pageSize_){
					break;
				}
			}
			String display = "<a>第"+pageno+"页</a>"+"&nbsp;&nbsp;"+"<a onclick=\"ajaxpage("+(pageno_+1)+")\">下一页</a>";
			Page page = new Page(pageno_+1, totleSize_, pageSize_, date);
			page.setDisplay(display);
			req.setAttribute("page", page);
			req.getRequestDispatcher("subpage/subPage.jsp").forward(req, resp);
	}
}

一个page的实体类

package com.entity;

import java.io.Serializable;
import java.util.ArrayList;

/**
 * 分页的实体类
 * @author Jay_Lee
 *
 */
public class Page implements Serializable{

	private static final long serialVersionUID = 1L;
	private static int DEFAULT_PAGE_SIZE = 10;
    private int pageSize = DEFAULT_PAGE_SIZE;
    private long start;
    private Object data;
    private long totalCount;
    private long currentPageNo = 1;
    private String display;

    public Page() {
        this(0, 0, DEFAULT_PAGE_SIZE, new ArrayList());
    }

    public Page(long start, long totalSize, int pageSize, Object data) {
        this.setParam(start, totalSize, pageSize, data);
    }

    public void setParam(long start, long totalSize, int pageSize, Object data) {
        this.pageSize = pageSize;
        this.start = start;
        this.totalCount = totalSize;
        this.data = data;
    }

    public long getTotalCount() {
        return this.totalCount;
    }

    public long getTotalPageCount() {
        if (this.totalCount % (long)this.pageSize == 0) {
            return this.totalCount / (long)this.pageSize;
        }
        return this.totalCount / (long)this.pageSize + 1;
    }

    public int getPageSize() {
        return this.pageSize;
    }

    public Object getResult() {
        return this.data;
    }

    public long getCurrentPageNo() {
        return this.currentPageNo;
    }

    public boolean hasNextPage() {
        return this.getCurrentPageNo() < this.getTotalPageCount() - 1;
    }

    public boolean hasPreviousPage() {
        return this.getCurrentPageNo() > 1;
    }

    protected static int getStartOfPage(int pageNo) {
        return Page.getStartOfPage(pageNo, DEFAULT_PAGE_SIZE);
    }

    public static int getStartOfPage(int pageNo, int pageSize) {
        return (pageNo - 1) * pageSize;
    }

    public void setCurrentPageNo(long pageNo) {
        this.currentPageNo = pageNo;
    }

	public String getDisplay() {
		return display;
	}

	public void setDisplay(String display) {
		this.display = display;
	}
    
}

然后再就是jsp页面 有两个页面 一个是主的页面 一个子页面专门放分页的

page主页面

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

</head>
<body>
	<div id="pageDiv">
		<jsp:include page="subpage/subPage.jsp"></jsp:include>
	</div>
</body>
<script type="text/javascript">
	function ajaxpage(currentPage){
		 $.ajax({
				url:"subpage.do?currentPage="+currentPage+"&pageSize=${page.pageSize}&totleSize=${page.totalCount}",
				dataType:"html",
				async: false, 
				success:function(html){
					 $("#pageDiv").html(html);
				},
				error:function(){
					alert("糟糕，出错了:(");
				}
			});
	}      
</script>
</html>

subpage子页面

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
	<table>
		<c:forEach items="${page.result}" var="pname"  varStatus="pt">
			<tr>
				<td>
					${pt.index}
				</td>
				<td>
					${pname}
				</td>
			</tr>	
		</c:forEach>
	</table>
	${page.display}

最后就是xml的配置了

<?xml version="1.0" encoding="utf-8"?>

<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	version="3.0" metadata-complete="true">

	<servlet>
		<servlet-name>pageServlet</servlet-name>
		<servlet-class>com.controller.PageController</servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name>pageServlet</servlet-name>
		<url-pattern>/page.do</url-pattern>
	</servlet-mapping>
	
	<servlet>
		<servlet-name>subpageServlet</servlet-name>
		<servlet-class>com.controller.AjaxPageController</servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name>subpageServlet</servlet-name>
		<url-pattern>/subpage.do</url-pattern>
	</servlet-mapping>
	
	<jsp-config>
		<taglib>
			<taglib-uri>PageTagUri</taglib-uri>
			<taglib-location>WEB-INF/testTag.tld</taglib-location>
		</taglib>
	</jsp-config>
</web-app>

// 下面的代码有上传 直接放入到tomcat就能使用 其中有几个类是没用到的 只是做了一部分记录而已

tar包是tomcat中导出的直接可以放到tomcat跑起来： http://localhost:8080/PageDemo/page.do
zip是源代码