AJAX 分页-------在后台分页

最新推荐文章于 2023-10-21 07:52:06 发布

cuichen97

最新推荐文章于 2023-10-21 07:52:06 发布

阅读量372

点赞数

分类专栏：练习

本文链接：https://blog.csdn.net/cuichen16/article/details/100145135

版权

练习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

根据员工名字和部门名称,模糊查询员工信息

在后台分页,一次运送一页数据

一.util下创建分页的工具类

PageUtil.java

package cn.qf.emp.util;

import java.sql.ResultSet;
import java.sql.SQLException;

public class PageUtil {
	//计算出总页数               表名              列名       每页的数据条数
	public int getTotalPages(String tableName,String keyName,int pageSize) {
		int totalPages=0;
		DbUtil db = new DbUtil();
		//1.查询总记录条数
		String sql = "select count("+keyName+") from "+tableName;
		ResultSet rs = db.executeSelect(sql);
		int totalCount=0;
		try {
			if (rs.next()) {
				totalCount=rs.getInt(1);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		//2.计算总页数
		totalPages = totalCount%pageSize==0? totalCount/pageSize:totalCount/pageSize+1;
		return totalPages;
	}
}

二.dao层

EmpDao.java

	//根据员工名字  员工分页查询
	public List<Emp> getAllEmpsByPage(int currentPage,int pageSize,Emp em){
		//模糊查询的值为空时,会查询出所有的数据,相当于select *
		String sql = "select * from emp where ename like ? and deptno like ? limit "+(currentPage-1)*pageSize+","+pageSize;
		List<Object> para = new ArrayList<Object>();
		para.add("%"+em.getEname()+"%");
		para.add("%"+em.getDeptno()+"%");
		List<Emp> lists = new ArrayList<Emp>();
		ResultSet rs = db.executeSelect(sql,para);
		try {
			while(rs.next()) {
				Emp emp = new Emp();
				emp.setEmpno(rs.getString("empno"));
				emp.setEname(rs.getString("ename"));
				emp.setJob(rs.getString("job"));
				emp.setSal(rs.getFloat("sal"));
				emp.setDeptno(rs.getString("deptno"));
				lists.add(emp);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return lists;
	}

三.service层

EmpService.java

	//根据员工名字  员工分页查询
	public List<Emp> getAllEmpsByPage(int currentPage,int pageSize,Emp em){
		return ed.getAllEmpsByPage(currentPage, pageSize, em);
	}

四.servlet层

GetEmpPageServlet.java (显示查询到的数据)

package cn.qf.emp.controller;

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

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

import cn.qf.emp.pojo.Emp;
import cn.qf.emp.service.EmpService;
import net.sf.json.JSONArray;

/**
 * Servlet implementation class GetEmpPageServlet
 * 根据名字查询员工
 */
@WebServlet("/GetEmpPageServlet")
public class GetEmpPageServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public GetEmpPageServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		//获取当前页
		int currentPage=Integer.parseInt(request.getParameter("cp"));
		//获取每页显示的数据条数
		int pageSize=Integer.parseInt(request.getParameter("ps"));
		Emp emp = new Emp();
		emp.setEname(request.getParameter("name"));
		emp.setDeptno(request.getParameter("deptno"));
		EmpService es = new EmpService();
		List<Emp> lists = es.getAllEmpsByPage(currentPage, pageSize, emp);
		response.setContentType("text/html;charset=utf-8");
		String json = JSONArray.fromObject(lists).toString();
		PrintWriter pw = response.getWriter();
		pw.print(json);
	}

}

GetEmpTotalPagesServlet.java

package cn.qf.emp.controller;

import java.io.IOException;
import java.io.PrintWriter;

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

import cn.qf.emp.util.PageUtil;

/**
 * Servlet implementation class GetEmpTotalPagesServlet
 * 获取总页数
 */
@WebServlet("/GetEmpTotalPagesServlet")
public class GetEmpTotalPagesServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public GetEmpTotalPagesServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获取每页显示的记录数
		int pageSize=Integer.parseInt(request.getParameter("ps"));
		//调用工具类,获取总页数
		PageUtil pu = new PageUtil();
		int totalPages=pu.getTotalPages("emp", "empno", pageSize);
		PrintWriter pw = response.getWriter();
		pw.print(totalPages);
				
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

GetDeptsJsonServlet.java (dao层,service层,省略)

package cn.qf.emp.controller;

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

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

import cn.qf.emp.pojo.Dept;
import cn.qf.emp.service.DeptService;
import net.sf.json.JSONArray;

/**
 * Servlet implementation class GetDeptsJsonServlet
 */
@WebServlet("/GetDeptsJsonServlet")
public class GetDeptsJsonServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public GetDeptsJsonServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		DeptService ds = new DeptService();
		List<Dept> lists = ds.getAllDepts();
		String strJson=JSONArray.fromObject(lists).toString();
		response.setContentType("text/html;charset=utf-8");
		PrintWriter pw = response.getWriter();
		pw.print(strJson);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

五.视图层

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分页</title>
<style type="text/css">
	.box{
		width: 800;
		height: 1000px;
		background: aquamarine;
		margin: 0 auto;
	}
	.box #head{
		background: #FFEFD5;
		height: 300px;
		text-align: center;
		border-top:1px solid white ;
	}
	.box #head #text{
		margin-top:25px ;
	}
	.box #head #divpage a{
		text-decoration: none;
		color: #000000;
		display: inline-block;
		height: 25px;
		width: 70px;
		border: 1px solid black;
		border-radius:20px;
	}
	.box #head #divpage a:hover{
		background:pink;
	}
	.box #head #page{
		width: 50px;
	}
	.box #head .tabledata table{
		border-collapse:collapse;
		text-align:center;
		margin:0 auto;
		margin-bottom:20px;
		width:500px;
	}
	.box #head .tabledata table td{
		border:1px solid black;
	}
</style>
<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
<script type="text/javascript">
	//定义全局变量:
	//默认初始页是1
	var currentPage=1;
	//每页显示的记录数是5
	var pageSize=5;
	//总页数
	var totalPages=0;
	//输入的要查询的名字
	var inputName="";
	//输入要查询的部门名字
	var inputDeptno="";
	//页面加载后自动调用以下三个方法
	//获取总页数 函数
	function getTotalPages(){
		$.ajax({
			url:"../GetEmpTotalPagesServlet?ps="+pageSize,
			type:"get",
			dataType:"text",
			async:false,
			success:function(tp){
				totalPages=tp;
				//调用更新页面函数
				updatePages();
			}
		});
	}
	//获取数据  函数  按员工名字
	function getData(){
		$.ajax({
			url:"/EmpAjax/GetEmpPageServlet",
			data:"cp="+currentPage+"&ps="+pageSize+"&name="+inputName+"&deptno="+inputDeptno,
			type:"post",
			dataType:"json",
			success:function(ary){
				showData(ary);
			}
		});
	}
	function initDept(){
		//AJAX请求获取部门的JSON数据
		$.ajax({
			url:"/EmpAjax/GetDeptsJsonServlet",
			type:"get",
			async:false,
			dataType:"json",
			success:function(data){
				//获取下拉列表
				var select=$("#dept");
				for(var i=0;i<data.length;i++){
					var option=$("<option class='co'></option>");
					option.val(data[i].deptno);
					option.text(data[i].dname);
					select.append(option);
				}
			}
		});
	}
	//页面加载结束
	$(function(){
		getTotalPages();
		getData();
		initDept()
	});
	
	//更新当前是第几页,共几页  函数
	function updatePages(){
		//当前页
		var currSpan=$("#currspan");
		currSpan.text(currentPage);
		//总页数
		var totalSpan=$("#totalspan");
		totalSpan.text(totalPages);
	}
	
	//把JSON数据显示在table中
	function showData(ary){
		var div=$(".tabledata");
		div.text("");
		//创建表格
		var table=$("<table></table>");
		div.append(table);
		var trHead=$("<tr><td>编号</td><td>姓名</td><td>职务</td><td>部门编号</td><td>薪资</td></tr>");
		table.append(trHead);
		for(var i=0;i<ary.length;i++){
			var tr=$("<tr></tr>");
			table.append(tr);
			
			var td1=$("<td></td>");
			td1.text(ary[i].empno);
			tr.append(td1);
			
			var td2=$("<td></td>");
			td2.text(ary[i].ename);
			tr.append(td2);
			
			var td3=$("<td></td>");
			td3.text(ary[i].job);
			tr.append(td3);
			
			var td4=$("<td></td>");
			td4.text(ary[i].deptno);
			tr.append(td4);
			
			var td5=$("<td></td>");
			td5.text(ary[i].sal);
			tr.append(td5);
		}
	}
	//页面跳转函数
	function jump(btn){
		var t=btn.innerText;
		if(t=="首页"){
			currentPage=1;
		}
		if(t=="上一页"){
			if(currentPage>1){
				currentPage--;
			}
		}
		if(t=="下一页"){
			if(currentPage<totalPages){
				currentPage++;
			}
		}
		if(t=="末页"){
			currentPage=totalPages;
		}
		getData();
		updatePages();
	}
	//查询
	function search(){
		inputName=$("#text").val();
		//获取到部门id
		inputDeptno=$("#dept").val();
		getData();
	}
	
	//跳转到多少页
	function skip(){
		currentPage=$("#page").val();
		getData();
	}
</script>
</head>
<body>
<div class="box">
			<div id="head">
				姓名:<input type="text" id="text" name="uname"/>
				部门:<select id="dept" name="dept"></select>
				<input type="button" value="查询"  onclick="search()"/>
				<br />
				<br />
				<br />
				<hr />
				<div class="tabledata">
					<!--动态生成-->
				</div>
				<div id="divpage">
					<a href="#" onclick="jump(this)">首页</a>
					<a href="#" onclick="jump(this)">上一页</a>
					<a href="#" onclick="jump(this)">下一页</a>
					<a href="#" onclick="jump(this)">末页</a>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
					当前第<span id="currspan"></span>页/ 
					共<span id="totalspan"></span>页 
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#" onclick="skip()">跳转到第</a>
					&nbsp;&nbsp;
					<input type="text" id="page"  />页
				</div>
			
			</div>
		</div>
</body>
</html>

cuichen97

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX 分页-------在后台分页

根据员工名字和部门名称,模糊查询员工信息在后台分页,一次运送一页数据一.util下创建分页的工具类PageUtil.javapackage cn.qf.emp.util;import java.sql.ResultSet;import java.sql.SQLException;public class PageUtil { //计算出总页数 ...
复制链接

扫一扫