java web常用到的ajax分页思路_JAVA

您所在的位置：程序员俱乐部 > 编程开发 > JAVA > java web常用到的ajax分页思路

java web常用到的ajax分页思路

2016/5/14 5:32:30 lijie_insist 程序员俱乐部我要评论(0)

摘要：有时候其实用同步的分页可以在url上记录页数这样把链接分享给别人的时候可以直接到那一页当然这里用的是ajax的分页自己写的一个简单的小demo没有链接数据库自己初始化的一个list代码如下因为是用的纯servlet+jsp没用任何别的框架所以写了2个servlet第一个servletpackagecom.controller;importjava.io.IOException;importjava.util.ArrayList;importjava.util.List;importjavax
标签：Web 常用 Ajax Java 思路

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

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

第一个servlet

class="java" name="code">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是源代码