Ajax实现分页查询

最新推荐文章于 2022-06-28 13:57:31 发布

赵大土

最新推荐文章于 2022-06-28 13:57:31 发布

阅读量1.6k

点赞数 1

文章标签： Ajax分页

本文链接：https://blog.csdn.net/weixin_43647393/article/details/101210578

版权

1. 项目效果图
2. 实现步骤

1. 项目效果图

2. 实现步骤

2.1 数据库环境搭建

2.1.1 emp表

emp

2.1.2 dept表

dept

2.2 项目基板搭建

2.2.1 目录搭建

2.2.2 导包

2.2.3 MybatisUtil工具类编写

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

public class MybatisUtil {
    private static SqlSessionFactory factory;
    private static ThreadLocal<SqlSession> tl=new ThreadLocal<>();

    static{
        try {
            InputStream is =Resources.getResourceAsStream("config.xml");
            factory=new SqlSessionFactoryBuilder().build(is);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    public static SqlSession getSqlSession(){
        SqlSession sqlSession=tl.get();
        if(null == sqlSession){
            sqlSession=factory.openSession();
            tl.set(sqlSession);
        }
        return tl.get();
    }
    public static void closeSqlSession(){
        SqlSession sqlSession=tl.get();
        if(null != sqlSession){
            sqlSession.close();
            tl.set(null);
        }
    }
}

2.2.4 MyFilter过滤器编写

import cn.khue.util.MybatisUtil;
import org.apache.ibatis.session.SqlSession;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;

@WebFilter("/*")
public class MyFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        SqlSession sqlSession= MybatisUtil.getSqlSession();
        try{
            filterChain.doFilter(servletRequest,servletResponse);
            sqlSession.commit();
        }catch (Exception e){
            sqlSession.rollback();
            e.printStackTrace();
        }
        MybatisUtil.closeSqlSession();
    }

    @Override
    public void destroy() {

    }
}

2.2.5 BaseServlet编写

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.Method;

public class BaseServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String methodName=req.getParameter("method");
        Class cla=this.getClass();
        Method method= null;
        try {
            method = cla.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
            method.invoke(this,req,resp);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

2.2.6 基础页面index.jsp实现

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<html>
  <head>
      <base href="<%=basePath%>">
      <title>分页查询</title>
      <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
      <style>
          td{
              text-align: center;
          }
      </style>
  </head>
  <body>
  <h2 style="text-align: center">员工信息查询</h2>
  <hr/>
  <div align="center" style="margin: 30px 30px">
      <div>
          员工编号<input type="text"/>&nbsp;
          员工姓名<input type="text"/>&nbsp;
          员工职务<input type="text"/>&nbsp;
      </div>
      <br/>
      <div>
          部门名称<input type="text"/>&nbsp;
          上级姓名<input type="text"/>&nbsp;
          入职日期<input type="text"/>&nbsp;
      </div>
      <br/>
      <input type="radio" name="pageSize" value="2">2
      <input type="radio" name="pageSize" value="3">3
      <input type="radio" name="pageSize" value="4">4
      &nbsp;&nbsp;&nbsp;&nbsp;
      <input type="button" value="查询" style="font-size: 20px"/>
  </div>
  <hr/>
  <table border="1px" cellspacing="0px" cellpadding="10px" align="center" style="margin-top: 30px">
    <thead>
    <tr>
        <th>员工编号</th>
        <th>员工姓名</th>
        <th>员工职务</th>
        <th>部门名称</th>
        <th>上级姓名</th>
        <th>入职日期</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<div align="center" style="margin-top: 10px">
    <a href="javascript:void(0)" >上一页</a>&nbsp;&nbsp;
    <a href="javascript:void(0)" >1</a>&nbsp;
    <a href="javascript:void(0)" >2</a>&nbsp;&nbsp;
    <a href="javascript:void(0)" >下一页</a>
</div>
  </body>
</html>

2.3 页面加载自动全部查询

2.3.1 实体类Emp.java编写

package cn.khue.bean;

public class Emp {
    private int empno;
    private String ename;
    private String job;
    private String dname;
    private String mgrname;
    private String hiredate;

    @Override
    public String toString() {
        return "Emp{" +
                "empno=" + empno +
                ", ename='" + ename + '\'' +
                ", job='" + job + '\'' +
                ", dname='" + dname + '\'' +
                ", mgrname='" + mgrname + '\'' +
                ", hiredate='" + hiredate + '\'' +
                '}';
    }

    public int getEmpno() {
        return empno;
    }

    public void setEmpno(int empno) {
        this.empno = empno;
    }

    public String getEname() {
        return ename;
    }

    public void setEname(String ename) {
        this.ename = ename;
    }

    public String getJob() {
        return job;
    }

    public void setJob(String job) {
        this.job = job;
    }

    public String getDname() {
        return dname;
    }

    public void setDname(String dname) {
        this.dname = dname;
    }

    public String getMgrname() {
        return mgrname;
    }

    public void setMgrname(String mgrname) {
        this.mgrname = mgrname;
    }

    public String getHiredate() {
        return hiredate;
    }

    public void setHiredate(String hiredate) {
        this.hiredate = hiredate;
    }

    public Emp(int empno, String ename, String job, String dname, String mgrname, String hiredate) {
        this.empno = empno;
        this.ename = ename;
        this.job = job;
        this.dname = dname;
        this.mgrname = mgrname;
        this.hiredate = hiredate;
    }

    public Emp() {
    }
}

2.3.2 映射文件EmpMapper.java编写

package cn.khue.mapper;

import cn.khue.bean.Emp;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface EmpMapper {
    @Select("select e.empno,e.ename,e.job,d.dname,p.ename mgrname,e.hiredate from emp e, emp p, dept d where e.mgr=p.empno and e.deptno=d.deptno")
    List<Emp> queryEmp();
}

2.3.3 业务层EmpService.java、EmpServiceImpl.java编写

package cn.khue.service;

import cn.khue.bean.Emp;

import java.util.List;

public interface EmpService {
    List<Emp> queryEmp();
}

package cn.khue.service;

import cn.khue.bean.Emp;
import cn.khue.mapper.EmpMapper;
import cn.khue.util.MybatisUtil;
import org.apache.ibatis.session.SqlSession;

import java.util.List;

public class EmpServiceImpl implements EmpService{
    EmpMapper mapper= MybatisUtil.getSqlSession().getMapper(EmpMapper.class);
    @Override
    public List<Emp> queryEmp() {
        return mapper.queryEmp();
    }
}

2.3.4 控制层EmpServlet.java编写

package cn.khue.servlet;

import cn.khue.bean.Emp;
import cn.khue.service.EmpService;
import cn.khue.service.EmpServiceImpl;
import com.google.gson.Gson;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/empServlet")
public class EmpServlet extends BaseServlet{
    public void queryEmp(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        resp.setContentType("text/html;charset=utf-8");
        EmpService empService=new EmpServiceImpl();
        List<Emp> emps = empService.queryEmp();
        for(Emp e:emps){
            System.out.println("\033[36m"+e+"\033[m");
        }
        resp.getWriter().write(new Gson().toJson(emps));
    }
}

2.3.5 视图层index.jsp动态响应

<tbody id="tb">
    <script>
        $(function () {
            $.post("empServlet",{method:"queryEmp"},function (t) {
                eval("var list="+t);
                var tb = $("#tb");
                for(var i=0;i<list.length;i++){
                    tb.append("<tr>\n" +
                        "        <td>"+list[i].empno+"</td>\n" +
                        "        <td>"+list[i].ename+"</td>\n" +
                        "        <td>"+list[i].job+"</td>\n" +
                        "        <td>"+list[i].dname+"</td>\n" +
                        "        <td>"+list[i].mgrname+"</td>\n" +
                        "        <td>"+list[i].hiredate+"</td>\n" +
                        "    </tr>")
                }
            })
        })
    </script>
    </tbody>

2.4 页面加载显示两行数据，并支持上下页点击事件

思路：

设定startPage=0，每点击一次下一页，startPage自增一；每点击一次上一页，startPage自减一
设定pageSize=2，其中2为每页默认显示数据条数，可根据用户选择自定义
在用户点击选择了每页显示数据条数时，查询表格自动重新加载
设定totalSize，在业务层中计算总共有多少条数据
设定totalPage，在业务层中计算总共有多少条数据

赵大土

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Ajax实现分页查询

1. 项目效果图2. 实现步骤2.1 数据库环境搭建2.1.1 emp表2.1.2 dept表2.2 项目基板搭建2.2.1 目录搭建2.2.2 导包2.2.3 MybatisUtil工具类编写2.2.4 MyFilter过滤器编写2.2.5 BaseServlet编写2.2.6 基础页面index.jsp实现2.3 页面加载自动全部查询2.3.1 实体类Emp.java编写2.3.2 映射文件...
复制链接

扫一扫