基于prototype.js的ajax分页

来源：互联网发布：软件二次开发工作编辑：程序博客网时间：2024/04/28 00:15

这是一个基于prototype.js的ajax分页，运用了spring框架，自定义分页标签，每次进入列表页面时，把列表存入session，分页只对session存储的列表进行分页，不需要再去查询数据库，性能会高些

首先在web.xml中配置spring监听和servlet

web.xml内容如下：

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" 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_2_5.xsd"> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath*:com/kt/application/application-context.xml</param-value> </context-param> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <servlet> <servlet-name>root-dispatcher</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>root-dispatcher</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list></web-app>

还需要在WEB-INF下建个root-dispatcher-servlet.xml的文件（没有这个文件会报错，为什么少了这个会出错就不知道了）

root-dispatcher-servlet.xml内容如下：

下面是spring的配置文件,文件名是application-context.xml(为了方便spring的配置都写这个文件里了)，启动tomcat 的时候加载

application-context.xml 内容如下

<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:util="http://www.springframework.org/schema/util" xmlns:lang="http://www.springframework.org/schema/lang" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-2.0.xsd http://www.springframework.org/schema/lang http://www.springframework.org/schema/lang/spring-lang-2.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.0.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.0.xsd"> <bean id="requiredChecker" class="org.springframework.beans.factory.annotation.RequiredAnnotationBeanPostProcessor" /> <bean name="urspin:urlMap" scope="singleton" lazy-init="true" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping"> <property name="mappings"> <props> <prop key="/test/testController.do">testController</prop> <prop key="/test/paginationController.do">paginationController</prop> </props> </property> </bean> <bean id="testController" lazy-init="true" scope="singleton" class="com.kt.controller.TestController"> <property name="pageSize" value="5"/> <lookup-method name="getModelAndView" bean="testGetModelAndView"/> </bean> <bean id="testGetModelAndView" lazy-init="true" scope="prototype" class="org.springframework.web.servlet.ModelAndView"> <property name="viewName" value="/page/test.jsp" /> </bean> <bean id="paginationController" lazy-init="true" scope="singleton" class="com.kt.controller.PaginationController"> <lookup-method name="getModelAndView" bean="paginationControllerGetModelAndView"/> </bean> <bean id="paginationControllerGetModelAndView" lazy-init="true" scope="prototype" class="org.springframework.web.servlet.ModelAndView"> <property name="viewName" value="/page/test_1.jsp" /> </bean></beans>

下面开始写分页标签，文件名为TagTest，要继承TagSupport类

TagTest.java 内容如下

package com.kt.tag;import java.io.IOException;import java.util.List;import javax.servlet.http.HttpSession;import javax.servlet.jsp.JspWriter;import javax.servlet.jsp.tagext.TagSupport;public class TagTest extends TagSupport{private int pageSize;private List list;private String url;private String location;public int doStartTag(){JspWriter out = pageContext.getOut();// 用pageContext获取out，他还能获取session等，// 基本上jsp的内置对象都能获取HttpSession session = (HttpSession) pageContext.getSession();session.setAttribute("list", list);int pageCount = (int)Math.ceil((double)list.size()/pageSize);StringBuffer strBuffer = new StringBuffer();strBuffer.append("<table><tr><td>").append("共").append(list.size()).append("条").append("</td><td>").append("<span id=/"current/"></span>").append("/").append(pageCount).append("页</td><td>").append("<input id=/"txt/" type=/"text/" size=/"1/" /><a href= /"javascript:goto()/">跳转</a>").append("</td>").append("<td><a href="/" mce_href="/""javascript:firstPage();/">首页</a></td>").append("<td><a href="/" mce_href="/""javascript:prePage(); /">上一页</a></td>").append("<td><a href="/" mce_href="/""javascript:nextPage(); /">下一页</a></td>").append("<td><a href="/" mce_href="/""javascript:endPage()/">最后一页</a>").append("</td>").append("</tr>").append("</table>").append("<mce:script type="text/javascript"></mce:script>");if (Integer.valueOf(pageSize) instanceof Integer){try{out.println(strBuffer.toString());} catch (IOException e){e.printStackTrace();}} else{try{out.println("<table>");out.println("<tr>");out.println("<td>");out.println("你输入的参数格式不对");out.println("</td>");out.println("<td>");out.println("</td>");out.println("</tr>");out.println("</table>");} catch (IOException e){e.printStackTrace();}}return EVAL_PAGE;// 标签执行完后，继续执行后面的}public int doEndTag(){return SKIP_BODY;// 标签执行完后，不继续执行后面的}public int getPageSize(){return pageSize;}public void setPageSize(int pageSize){this.pageSize = pageSize;}public List getList(){return list;}public void setList(List list){this.list = list;}public String getUrl(){return url;}public void setUrl(String url){this.url = url;}public String getLocation(){return location;}public void setLocation(String location){this.location = location;}}

写好java标签后，在WEB-INF下建立个tld类型的文件配置标签，我建的标签配置文件叫tagLib

tagLib.tld 内容如下：

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN" "http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd"><taglib> <tlibversion>1.2</tlibversion> <jspversion>1.1</jspversion> <shortname>bean</shortname> <uri>MyTagLib</uri> <tag> <name>showDataTag</name> <tagclass>com.kt.tag.TagTest</tagclass> <attribute> <name>pageSize</name> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>list</name> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>url</name> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>location</name> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> </tag></taglib>

现在开始写用于显示列表的两个controller

TestController.java用于首次进入列表页面(test.jsp)，分页时调用PaginationController.java，返回一个简单页面(test_1.jsp),并局部刷新test.jsp页面

TestController.java 内容如下

package com.kt.controller;import java.util.ArrayList;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.springframework.beans.factory.annotation.Required;import org.springframework.web.servlet.ModelAndView;import org.springframework.web.servlet.mvc.AbstractController;import com.kt.entity.Person;import com.kt.entity.impl.PersonImpl;public class TestController extends AbstractController{private int pageSize;private ModelAndView modelAndView;@Overrideprotected ModelAndView handleRequestInternal(HttpServletRequest request,HttpServletResponse response) throws Exception{List<Person> list = new ArrayList<Person>();for(int i = 0; i<23; i++){Person person = new PersonImpl();person.setUserName("name_" + i);person.setAge(i);list.add(person);}List<Person> pageList = list.subList(0, pageSize);ModelAndView modelAndView = getModelAndView();modelAndView.addObject("list", list);modelAndView.addObject("pageList", pageList);return modelAndView;}@Requiredpublic void setPageSize(int pageSize){this.pageSize = pageSize;}public ModelAndView getModelAndView(){return modelAndView;}}

其中pageSize属性在spring配置文件中注入，其值应该与页面标签代码中的pageSize相同，否则分页会不正确

PaginationController.java内容如下

package com.kt.controller;import java.util.ArrayList;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.springframework.web.servlet.ModelAndView;import org.springframework.web.servlet.mvc.AbstractController;public class PaginationController extends AbstractController{private ModelAndView modelAndView;@SuppressWarnings("unchecked")@Overrideprotected ModelAndView handleRequestInternal(HttpServletRequest request,HttpServletResponse response) throws Exception{int pageSize = Integer.valueOf(request.getParameter("pageSize"));int currentPage = Integer.valueOf(request.getParameter("currentPage"));List list = (List)request.getSession().getAttribute("list");int totalCount = list.size();List pageList = new ArrayList();if(pageSize >= totalCount){pageList = list;}else if((pageSize > 0)&&(pageSize < totalCount)){if(1 == currentPage){pageList = getPageList(list, 0, pageSize);}else if(1 < currentPage){pageList = (currentPage * pageSize > totalCount)?getPageList(list, (currentPage - 1) * pageSize, totalCount):getPageList(list, (currentPage - 1) * pageSize, currentPage * pageSize);}}ModelAndView modelAndView = getModelAndView();modelAndView.addObject("pageList", pageList);return modelAndView;}@SuppressWarnings("unchecked")private List getPageList(List list, int startIndex, int endIndex){return list.subList(startIndex, endIndex);}public ModelAndView getModelAndView(){return modelAndView;}}

由于考虑到共用性，该controller中的List没有指明具体的类型。

下面建立个简单的JavaBean，用于测试

接口类Person.java

实现类PersonImpl.java

Person.java 内容如下：

package com.kt.entity;public interface Person{public abstract String getUserName();public abstract void setUserName(String userName);public abstract int getAge();public abstract void setAge(int age);}

PersonImpl.java 内容如下：

package com.kt.entity.impl;import com.kt.entity.Person;public class PersonImpl implements Person{private String userName;private int age;public String getUserName(){return userName;}public void setUserName(String userName){this.userName = userName;}public int getAge(){return age;}public void setAge(int age){this.age = age;}}

下面是页面代码

test.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%><%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%><%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%><%@taglib uri="/WEB-INF/tagLib.tld" prefix="aaa" %><html><head><title>Hotel List</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><mce:script type="text/javascript" src="../js/prototype.js" mce_src="js/prototype.js"></mce:script></head><body> <table> <tr> <td>姓名</td> <td>年龄</td> </tr> <tbody id="dataShow"> <c:forEach items="${pageList}" var="person" varStatus="status"> <tr> <td>${person.userName}</td> <td>${person.age}</td> </tr> </c:forEach> </tbody> </table><div style="width: 500px; float: left;"><aaa:showDataTag url="/ajaxPagination/test/paginationController.do" location="dataShow" list="${list}" pageSize="5"></aaa:showDataTag></div></body></html>

url：是Ajax要提交的controller映射 ''/ajaxPagination/test/paginationController.do"中，ajaxPagination为项目名称

location：返回页面要刷新的区域

list：用于分页的List

pageSize：每页显示的条数，该数值应与TestController.java中的pageSize数值相同

注意：在test.jap页面中不要忘记把prototype.js文件放进去

test_1.jsp