AJAX实现后台分页

最新推荐文章于 2022-12-16 21:07:44 发布

MichaelWashington

最新推荐文章于 2022-12-16 21:07:44 发布

阅读量511

点赞数

文章标签： hibernate struts2

本文链接：https://blog.csdn.net/MichaelWashington/article/details/81587958

版权

1 index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%
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%>">
    
    <title>My JSP 'login.jsp' starting page</title>
    
	<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">

	<style type="text/css">
		#Student
		  {
			  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
			  width:100%;
			  border-collapse:collapse;
		  }
		
		#Student td, #Student th 
		  {
			  font-size:1em;
			  border:1px solid #98bf21;
			  padding:3px 7px 2px 7px;
		  }
		
		#Student td 
		  {
			  font-size:1.1em;
			  text-align:left;
			  padding-top:5px;
			  padding-bottom:4px;
			  background-color:#A7C942;
			  color:#ffffff;
		  }
		
		#Student tr.alt th 
		  {
			  color:#000000;
			  background-color:#EAF2D3;
		  }
	</style>
	<link rel="stylesheet" type="text/css" href="css/paging.css">
	<script src="js/jquery-3.1.1.js"></script>
	<script type="text/javascript" src="js/paging.js"></script>
	<script >
		$(document).ready(function(){
			$('ul li').click(function(){
				var page=$(this).text(); //获取ul的li的文本内容赋值给page
				//alert(page);
				$.ajax({
        		url:'pageselect.action',
        		type:'post',
        		data: {pageindex:page},  //把page参数赋值给Action中接受数据的pageindex
        		dataType:"json",
        		error:function(){
        			alert("有错。。。。");
        		},
        		success:function(data){//请求成功后，执行的方法
					//alert(data);
					var json = eval("(" + data + ")");//转换为json对象
					//alert(json);
					//该data 从后台返回的数据
					//遍历 json 输出 <tr><td></td></tr>
					$("tr[name='remove']").remove();
				    $.each(json, function(i, item) {
				        var $tr = $('<tr name="remove">').append(
				            		$('<td>').text(item.sid),
				            		$('<td>').text(item.name))
				            		.appendTo('#Student');
				    });
				}
        	});
			})
			
			$("#prePage").click(function(){
				var page=$('li.sel-page').text(); //获取ul的li的文本内容赋值给page
				//alert(page);
				$.ajax({
        		url:'pageselect.action',
        		type:'post',
        		data: {pageindex:page},  //把page参数赋值给Action中接受数据的pageindex
        		dataType:"json",  //当出现跨域异常时，可改为jsonp
        		error:function(){
        			alert("有错。。。。");
        		},
        		success:function(data){//请求成功后，执行的方法
					//alert(data);
					var json = eval("(" + data + ")");//转换为json对象
					//alert(json);
					//该data 从后台返回的数据
					//遍历 json 输出 <tr><td></td></tr>
					$("tr[name='remove']").remove();
				    $.each(json, function(i, item) {
				        var $tr = $('<tr name="remove">').append(
				            		$('<td>').text(item.sid),
				            		$('<td>').text(item.name))
				            		.appendTo('#Student');
				    });
				}
        	});
			})
			
			$("#nextPage").click(function(){
				var page=$('li.sel-page').text(); //获取ul的li的文本内容赋值给page
				//alert(page);
				$.ajax({
        		url:'pageselect.action',
        		type:'post',
        		data: {pageindex:page},  //把page参数赋值给Action中接受数据的pageindex
        		dataType:"json",
        		error:function(){
        			alert("有错。。。。");
        		},
        		success:function(data){//请求成功后，执行的方法
					//alert(data);
					var json = eval("(" + data + ")");//转换为json对象
					//alert(json);
					//该data 从后台返回的数据
					//遍历 json 输出 <tr><td></td></tr>
					$("tr[name='remove']").remove();
				    $.each(json, function(i, item) {
				        var $tr = $('<tr name="remove">').append(
				            		$('<td>').text(item.sid),
				            		$('<td>').text(item.name))
				            		.appendTo('#Student');
				    });
				}
        	});
			})
			
			$("#firstPage").click(function(){
				var page=1; //获取ul的li的文本内容赋值给page
				//alert(page);
				$.ajax({
        		url:'pageselect.action',
        		type:'post',
        		data: {pageindex:page},  //把page参数赋值给Action中接受数据的pageindex
        		dataType:"json",
        		error:function(){
        			alert("有错。。。。");
        		},
        		success:function(data){//请求成功后，执行的方法
					//alert(data);
					var json = eval("(" + data + ")");//转换为json对象
					//alert(json);
					//该data 从后台返回的数据
					//遍历 json 输出 <tr><td></td></tr>
					$("tr[name='remove']").remove();
				    $.each(json, function(i, item) {
				        var $tr = $('<tr name="remove">').append(
				            		$('<td>').text(item.sid),
				            		$('<td>').text(item.name))
				            		.appendTo('#Student');
				    });
				}
        	});
			})
			
			$("#lastPage").click(function(){
				var page=4; //获取ul的li的文本内容赋值给page
				//alert(page);
				$.ajax({
        		url:'pageselect.action',
        		type:'post',
        		data: {pageindex:page},  //把page参数赋值给Action中接受数据的pageindex
        		dataType:"json",
        		error:function(){
        			alert("有错。。。。");
        		},
        		success:function(data){//请求成功后，执行的方法
					//alert(data);
					var json = eval("(" + data + ")");//转换为json对象
					//alert(json);
					//该data 从后台返回的数据
					//遍历 json 输出 <tr><td></td></tr>
					$("tr[name='remove']").remove();
				    $.each(json, function(i, item) {
				        var $tr = $('<tr name="remove">').append(
				            		$('<td>').text(item.sid),
				            		$('<td>').text(item.name))
				            		.appendTo('#Student');
				    });
				}
        	});
			})
			
		})
	
	</script>
  </head>
  
  <body>
    	查询结果！
	<table id="Student">
		<tr name="remove">
			<th>学生sid</th>
			<th>学生name</th>
		</tr>
		<%-- <s:iterator value="#session.list" var="sss">
			<tr>
				<td>${sss.sid}</td>
				<td>${sss.name}</td>
			</tr>
		</s:iterator> --%>
	</table >
	<!-- <ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul> -->
	
	<%-- <table id="Student">
		<tr>
			<th>学生sid</th>
			<th>学生name</th>
		</tr>
		<tr>
			<c:forEach items="${sessionScope.list}" var="studentlist2">
				<h2>${studentlist2.sid}</h2>
				<h2>${studentlist2.name}</h2>
			</c:forEach>
		</tr>
		<ul><li><a href="a/pageselect2?pageindex=%{#session.returnindex-1}&pagesize=2" >上一页</a></li>
			<li><a href="a/pageselect2?pageindex=1&pagesize=2" >1</a></li> <!--  ?就是告诉编译器有参数传入，pageindex=1就是参数，如果不需要传参数就可以去掉 -->
    		<li><a href="a/pageselect2?pageindex=2&pagesize=2" >2</a></li>
    		<li><a href="a/pageselect2?pageindex=3&pagesize=2" >3</a></li>
    		<li><a href="a/pageselect2?pageindex=4&pagesize=2" >4</a></li>
    		<li><a href="a/pageselect2?pageindex=%{#session.returnindex+1}&pagesize=2" >下一页</a></li>
		</ul>
	</table> --%>
	
	
	<div class="box" id="box">
		<button type="button" id="firstPage" class="turnPage first-page">首页</button>
		<button class="turnPage" id="prePage">上一页</button>
		<div class="pageWrap" style="width:300px">
			<ul id="pageSelect"
				style="transition: all 600ms; transform: translateX(-480px);">
				<li class="sel-page"><a href="selectStudent?currentPage=1">1</a></li>
				<li id="li2" class="">2</li>
				<li class=""><a href="selectStudent?currentPage=3">3</a></li>
				<li class="">4</li>
				<li class="">5</li>
				<li class=""><a href="selectStudent?currentPage=6">6</a></li>
				<li class="">7</li>
				<li class="">8</li>
				<li class="">9</li>
				<li class="">10</li>
				<li>11</li>
				<li>12</li>
				<li>13</li>
				<li>14</li>
				<li>15</li>
				<li>16</li>
				<li>17</li>
				<li>18</li>
				<li>19</li>
				<li>20</li>
				<li>21</li>
				<li>22</li>
				<li>23</li>
				<li>24</li>
				<li>25</li>
				<li>26</li>
				<li>27</li>
				<li>28</li>
				<li>29</li>
				<li>30</li>
			</ul>
		</div>
		<button class="turnPage" id="nextPage">下一页</button>
		<button type="button" id="lastPage" class="last-page">尾页</button>
		<input type="text" placeholder="1" class="jump-text" id="jumpText"> 
		<!-- placeholder属性提供可描述输入字段预期值的提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失 -->
		<button type="button" class="jump-button" id="jumpBtn">跳转</button>
		<p class="total-pages">共&nbsp;30&nbsp;页</p>
		<p class="total-count">合计301条数据</p>
	</div>
	
	<script>
		var setTotalCount = 301;
		$('#box').paging({
			initPageNo : 1, // 初始页码
			totalPages : 30, //总页数
			totalCount : '合计' + setTotalCount + '条数据', // 条目总数
			slideSpeed : 600, // 缓动速度。单位毫秒
			jump : true, //是否支持跳转
			callback : function(page) { // 回调函数
				console.log(page);
			}
		})
	</script>
	
	
	
  </body>
</html>

2 Action类

package com.yy.oa.action;

import java.util.List;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;
import com.yy.oa.biz.StudentBiz;
import com.yy.oa.biz.impl.StudentBizImpl;
import com.yy.oa.domain.Student;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class StudentAction extends ActionSupport implements ModelDriven<Student>{

	//ModelDriven理解：使用了ModelDriven,Action类中可不用再定义sid和name属性，定义了student属性都可以获取
	private Student student;
	private String returndata;
	public String getReturndata() {
		return returndata;
	}
	public void setReturndata(String returndata) {
		this.returndata = returndata;
	}
	@Override
	public Student getModel() {
		// TODO Auto-generated method stub
		return null;
	}
	public Student getStudent() {
		return student;
	}

	public void setStudent(Student student) {
		this.student = student;
	}
	
	public String addStudent() throws Exception {
		StudentBiz biz = new StudentBizImpl();
		int i = biz.addStudent(student);
		if(i > 0){
			return SUCCESS;
		}
		return ERROR;
	}
	public String deleteStudent() throws Exception {
		StudentBiz biz = new StudentBizImpl();
		int i = biz.deleteStudent(student);
		if(i > 0){
			return SUCCESS;
		}
		return ERROR;
	}
	public String updateStudent() throws Exception {
		StudentBiz biz = new StudentBizImpl();
		int i = biz.updateStudent(student);
		if(i > 0){
			return SUCCESS;
		}
		return ERROR;
	}
	public String selectStudent() throws Exception{
		StudentBiz biz = new StudentBizImpl();
		List<Student> list = biz.selectList(student);
		ActionContext.getContext().getApplication().put("list", list);
		return SUCCESS;
	}
	
	private int pageindex;//pageindex
	private int pagesize;
	
	public int getPageindex() {
		return pageindex;
	}
	public void setPageindex(int pageindex) {
		this.pageindex = pageindex;
	}
	public int getPagesize() {
		return pagesize;
	}
	public void setPagesize(int pagesize) {
		this.pagesize = pagesize;
	}
	public String getList() throws Exception{
		StudentBiz biz = new StudentBizImpl();
		List<Student> list = biz.getList(pageindex, pagesize);  //不能用this.pageindex,这样取的是代码页的pageindex,不是jsp页面传过来的pageindex
		ActionContext.getContext().getSession().put("list", list);
		JSONArray json=JSONArray.fromObject(list);
		/*JSONObject json = JSONObject.fromObject(list);
		 * 会报异常：net.sf.json.JSONException: 'object' is an array. Use JSONArray instead
		 * */
        //returndata = json.toString();
        setReturndata(json.toString());
		return SUCCESS;
	}
	
	public String pageselect() throws Exception{
		StudentBiz biz = new StudentBizImpl();
		int pageindex = Integer.valueOf(ServletActionContext.getRequest().getParameter("pageindex"));
		//ServletActionContext.getContext().getSession().put("returnindex", pageindex);
		List<Student> list = biz.getList(pageindex, 2);
		//ActionContext.getContext().getSession().put("list", list);
		JSONArray json=JSONArray.fromObject(list);
		setReturndata(json.toString());
		return SUCCESS;
	}
	
	public String pageselect2() throws Exception{
		StudentBiz biz = new StudentBizImpl();
		int pageindex = Integer.valueOf(ServletActionContext.getRequest().getParameter("pageindex"));
		ServletActionContext.getContext().getSession().put("returnindex", pageindex);
		List<Student> list2 = biz.getList(pageindex, 2);
		ActionContext.getContext().getSession().put("list", list2);
		return SUCCESS;
	}
	
}