Ajax实现分页查询

article/2025/10/20 9:04:26

  • 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 映射文件EmpMapper.java编写
      • 2.3.3 业务层EmpService.java、EmpServiceImpl.java编写
      • 2.3.4 控制层EmpServlet.java编写
      • 2.3.5 视图层index.jsp动态响应
    • 2.4 页面加载显示两行数据，并支持上下页点击事件

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 {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic 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();}@Overridepublic 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 {@Overrideprotected 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;@Overridepublic 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);@Overridepublic 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 页面加载显示两行数据，并支持上下页点击事件

思路：

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

http://chatgpt.dhexx.cn/article/U6kdXopn.shtml

相关文章

实现Ajax分页

实现Ajax分页

<!-- 引入jQuery的类库 --> <script type"text/javascript" scr"js/jquery-3.3.1.js"></script> <!-- 另起一个script块 --> <script type"text/javascript"> //页面载入函数 $(function(){ …
阅读更多...
jquery ajax 分页 java_jquery +ajax 分页实现

jquery ajax 分页 java_jquery +ajax 分页实现

分页 a{text-decoration: none} .content{width:1000px;margin:0 auto;padding-top:50px;} .left-col{float:left;width:700px} .right-col{float:right;width:300px} table{width:100%} table{border-collapse:collapse;border-spacing: 0} table tr{border:1px solid #ccc;he…
阅读更多...
ajax分页插件哪个好用,分享精心挑选的12款优秀jQuery Ajax分页插件和教程

ajax分页插件哪个好用,分享精心挑选的12款优秀jQuery Ajax分页插件和教程

Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高&#xff0c;如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。我们一起来看看下面这些优秀的分页插件。1.Client-side jQuery pagination plugin : jPages jPages是一款非常不错的客户端分页插件&…
阅读更多...
tp5的ajax搜索后分页,修改TP5的分页类使之Ajax分页有效

tp5的ajax搜索后分页,修改TP5的分页类使之Ajax分页有效

Thinkphp 5.1采用Ajax分页后&#xff0c;首页自然不是问题&#xff0c;但是后续的页面链接仍然指向原地址&#xff1b;虽然可以取回数据&#xff0c;但是没有样式的渲染——因为此时的页面只有“一部分”本身就没有CSS样式&#xff01; 解决的办法有很多&#xff0c;比如重新创…
阅读更多...
DataTables PHP AJAX 分页

DataTables PHP AJAX 分页

DataTables 是一个 jQuery 插件&#xff0c;可以更轻松地在网页上添加分页。 只需要添加记录列表&#xff0c;它就会自动调整数据并创建具有搜索和排序功能的分页。 有一些选项可用于实现AJAX 分页。 在本教程中&#xff0c;我将展示如何使用 PHP 在 DataTables 中实现 AJAX …
阅读更多...
html ajax分页,简单ajax 分页

html ajax分页,简单ajax 分页

简单分页&#xff1a; 效果图&#xff1a; 思路&#xff1a; 数据渲染》数据遍历(每页显示已规定好的条数).bindList()和执行分页渲染.initPaginator() 点击分页和下一页的时候&#xff0c;重新请求数据渲染&#xff0c;对应的数据重新遍历。 代码实现&#xff1a; html:分页测…
阅读更多...
Ajax做分页

Ajax做分页

用这种ajax做分页的方法比较简单&#xff0c;把代码直接复制就可以&#xff0c;然后根据实际更改一下里面的参数。 1.设置分页显示显示的样式&#xff0c;显示效果如下。 <style type"text/css"> *{ margin:0px auto; padding:0px; font-family:"微软雅黑…
阅读更多...
ajax实现分页操作

ajax实现分页操作

利用ajax请求数据的特点&#xff0c;来实现分页操作。 主要是利用ajax进行后端分页&#xff0c;当点击对应的页数&#xff0c;ajax请求数据库对应的数据&#xff0c;后端分页可以降低前端请求数据的压力&#xff0c;页面渲染起来比较流畅。 根据后台请求的数据&#xff0c;来创…
阅读更多...
XUnit测试框架-Python unittest

XUnit测试框架-Python unittest

选择 语言选择 本次个人作业我选择的语言是Python,了解学习Python有一段时间了但是一直没有练习&#xff0c;所以这次玩蛇&#xff0c;使用的版本是Python3.6。 开发工具选择 我选择的IDE是Pycharm,个人认为Pycharm是一款不错的Py开发工具&#xff0c;用起来得心应手&#xff0…
阅读更多...
单元测试-xUnit

单元测试-xUnit

单元测试-xUnit Assert常用方法 名称描述Eqalexpected.result)断言结果与期望值相等。该方法的重载版本用于比较不同的类型和集合。该方法的另一种版本接受一个额外参数该对象实现了用于比较对象的IEqualityComparer接口NotEqual(expected,result)断言结果不等于期望值True(r…
阅读更多...
xUnit安装及注意事项

xUnit安装及注意事项

前言 对于单元测试&#xff0c;想必大家都已再熟悉不过了&#xff0c;同时单元测试的重要性也越发突出&#xff0c;在招聘中也特别强调单元测试&#xff0c;但是对于微软内置的单元测试还是太过于繁琐&#xff0c;于是都在寻找一种简洁并且更加轻量的测试工具。用的最多的莫过于…
阅读更多...
Xunit.net 单元测试学习——按顺序测试

Xunit.net 单元测试学习——按顺序测试

最近一直在提高编码的质量&#xff0c;为了保证质量&#xff0c;必须有一套趁手的兵器&#xff0c;Xunit.Net 就是如此霸气的利器。 怎么编写单元测试 怎么会有如此低级的疑问呢&#xff1f;因为从接触单元测试&#xff0c;到使用上&#xff0c;真的不是一个简单的心路历程&am…
阅读更多...
单元测试-xUnit总结

单元测试-xUnit总结

xUnit总结 什么是xUnit xUnit.net是针对.NET Framework的免费&#xff0c;开源&#xff0c;以社区为中心的单元测试工具。 自动化测试的优点 可以频繁的进行测试可以在任何时间进行测试&#xff0c;也可以按计划定时进行&#xff0c;例如&#xff1a;可以在半夜进行自动化测…
阅读更多...
单元测试之 Xunit

单元测试之 Xunit

&#xfeff;&#xfeff; 单元测试项目中引入 xunit.dll 1. 有类 Common&#xff0c;中有方法 Divide(int a, int b)&#xff0c;代码如下 public class Common {public int Divide(int a, int b){if (b 0)return 0;return a / b;} } 2. 在单元测试项目中为方法 Divide 写单元…
阅读更多...
使用 xunit 编写测试代码

使用 xunit 编写测试代码

使用 xunit 编写测试代码 Intro xunit 是 .NET 里使用非常广泛的一个测试框架&#xff0c;有很多测试项目都是在使用 xunit 作为测试框架&#xff0c;不仅仅有很多开源项目在使用&#xff0c;很多微软的项目也在使用 xunit 来作为测试框架。 Get Started 在 xunit 中不需要标记…
阅读更多...
C#_Unit Testing 一（xUnit）

C#_Unit Testing 一（xUnit）

一、前言 在VS中新建一个xunit的项目&#xff0c;该项目中已经自动安装了一些Nuget包&#xff0c;其中一个关键的就是xunit&#xff0c;https://xunit.net/。 同时&#xff0c;在同一个解决方案下我们也新建了一个类库&#xff0c;这个类库就是需要被测试的。这里提一点&…
阅读更多...
在.NET开发中的单元测试工具之(2)——xUnit.Net

在.NET开发中的单元测试工具之(2)——xUnit.Net

在上一篇《在.NET开发中的单元测试工具之(1)——NUnit》中讲述了如何使用NUnit在.NET开发中进行单元测试以及NUnit的一些缺点&#xff0c;今天将讲述如何使用xUnit.Net来进行单元测试。 xUnit.Net介绍 xUnit.net的创造者的创造者是Jim Newkirk和Brad Wilson从包括NUnit及其它单…
阅读更多...
单元测试中Assert详解-xUnit

单元测试中Assert详解-xUnit

前一篇&#xff1a;详谈单元测试-xUnit 简介 Assert 是基于代码的返回值、对象的最终状态、事件是否发生等情况来评估测试的结果。Assert 的结果可能是 Pass 或者 Fail。如果所有的 Asserts 都通过了&#xff0c;那么整个测试就通过了。如果任何 Asserts 失败了&#xff0c;那…
阅读更多...
xUnit-Moq框架

xUnit-Moq框架

基于上一次的单元测试-xUnit进行 Models文件夹 Staff类修改为&#xff1a; public class Staff { public int Id { get; set; } public string Name { get; set; } public string State { get; set; } public int Age { get; set; } } 创建一个IRepository接口…
阅读更多...
xUnit.net入门

xUnit.net入门

xUnit.net是一个免费的、开源的、以社区为中心的.net框架单元测试工具。 本文在Win10Visual Studio2022-Preview下&#xff0c;创建一个简单的.Net Framework4.8的xUnit.net测试项目。 1、新建项目 打开VS2022&#xff0c;新建项目&#xff0c;弹出“创建新项目”窗口&#…
阅读更多...
推荐文章

Copyright @ 2022~2023