我做得功能是用户点击前端的模块后,项目接收请求返回页面给前端,在前端成功获取页面并加载完成时调用JQuery的ajax方法,发送获取数据请求。服务器获取请求之后查询数据将数据返回给ajax的成功回调函数,在回调函数中利用JQuery技术更新页面,并且具备(含查询条件)查找上一页和下一页的功能。
配置准备工作
在pox.xml文件注入PageHelper依赖关系:
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.0.0</version>
</dependency>
在dao层中的配置拦截器:
<!--配置SessionFactory-->
<!--reasonable=true:分页参数合理化,即不可能到达-1页之类不合理的页数-->
<bean id="sessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"/>
<property name="typeAliasesPackage" value="com.myhomes.entity"/>
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageInterceptor">
<property name="properties">
<value>
helperDialect=mysql
reasonable=true
supportMethodsArguments=true
params=count=countSql
autoRuntimeDialect=true
</value>
</property>
</bean>
</array>
</property>
</bean>
1.数据库内容
month_cost表:
booker_id为外键
内容:
2.数据库层
接口类:(最后一个方法)
package com.myhomes.dao;
import com.myhomes.entity.MonthCost;
import com.myhomes.entity.User;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository("monthCostDao")
public interface MonthCostDao {
MonthCost selectLastMonthMeterByHouseId(String houseId);
void insertMonthCost(MonthCost monthCost);
List<MonthCost> selectAllMonthCost();
List<MonthCost> selectByCondition(@Param("list") List<User> userList, @Param("houseId") String houseId);
List<MonthCost> selectMonthCost(@Param("bookerName")String bookerName, @Param("houseId") String houseId);
}
映射实现文件:(selectMonthCost)这个
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.4//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.myhomes.dao.MonthCostDao">
<resultMap id="monthCost" type="MonthCost">
<id property="idNum" column="id" javaType="Integer"></id>
<result property="houseId" column="house_id" javaType="String"></result>
<result property="bookerId" column="booker_id" javaType="Integer"></result>
<result property="bookerName" column="booker_name" javaType="String"></result>
<result property="yearsMonth" column="years_month" javaType="java.sql.Date"></result>
<result property="rent" column="rent" javaType="Integer"></result>
<result property="waterMeter" column="water_meter" javaType="Double"></result>
<result property="powerMeter" column="power_meter" javaType="Double"></result>
<result property="network" column="network" javaType="Integer"></result>
<result property="clean" column="clean" javaType="Integer"></result>
<result property="sum" column="sums" javaType="Double"></result>
<!--<result property="deposit" column="deposit" javaType="Integer"></result>-->
<association property="users" column="booker_id" javaType="User" select="com.myhomes.dao.UserDao.selectById">
</association>
</resultMap>
<select id="selectLastMonthMeterByHouseId" parameterType="String" resultMap="monthCost">
select house_id,years_month,rent,water_meter,power_meter from month_cost where house_id = #{houseId} order by years_month desc LIMIT 0,1
</select>
<insert id="insertMonthCost" parameterType="MonthCost" useGeneratedKeys="true" keyColumn="id">
insert into month_cost(house_id,booker_id,years_month,rent,water_meter,power_meter,network,clean,sums) value
(#{houseId},#{bookerId},#{yearsMonth},#{rent},#{waterMeter},#{powerMeter},#{network},#{clean},#{sum})
</insert>
<select id="selectAllMonthCost" resultMap="monthCost">
select * from month_cost where booker_id != '' order by years_month desc
</select>
<select id="selectMonthCost" resultMap="monthCost">
select * from month_cost where 1=1
<if test="bookerName != '' and bookerName != null and bookerName != 'null'">
and booker_name like concat('%',#{bookerName},'%')
</if>
<if test="houseId != '' and houseId != null and houseId != 'null'">
and house_id = #{houseId}
</if>
and booker_id != '' order by years_month desc
</select>
<!--<select id="selectByCondition" resultMap="monthCost">-->
<!--select * from month_cost where 1=1-->
<!--<if test="list != null">-->
<!--and month_cost.booker_id in-->
<!--<foreach collection="list" item="user" open="(" separator="," close=")">-->
<!--#{user.id}-->
<!--</foreach>-->
<!--</if>-->
<!--<if test="houseId != '' and houseId != null">-->
<!--and month_cost.house_id = #{houseId}-->
<!--</if>-->
<!--order by month_cost.years_month desc-->
<!--</select>-->
</mapper>
实体类:
package com.myhomes.entity;
import org.springframework.format.annotation.DateTimeFormat;
import java.util.Date;
public class MonthCost {
private Integer idNum;
private String houseId;
private Integer bookerId;
private String bookerName;
@DateTimeFormat(pattern="yyyy-MM-dd")
private Date yearsMonth;
private Integer rent;
private double waterMeter;
private double powerMeter;
private Integer network;
private Integer clean;
private double sum;
//private Integer deposit;
private User users;
// public Integer getDeposit() {
// return deposit;
// }
//
// public void setDeposit(Integer deposit) {
// this.deposit = deposit;
// }
public String getBookerName() {
return bookerName;
}
public void setBookerName(String bookerName) {
this.bookerName = bookerName;
}
public Integer getIdNum() {
return idNum;
}
public void setIdNum(Integer idNum) {
this.idNum = idNum;
}
public String getHouseId() {
return houseId;
}
public void setHouseId(String houseId) {
this.houseId = houseId;
}
public Integer getBookerId() {
return bookerId;
}
public void setBookerId(Integer bookerId) {
this.bookerId = bookerId;
}
public Date getYearsMonth() {
return yearsMonth;
}
public void setYearsMonth(Date yearsMonth) {
this.yearsMonth = yearsMonth;
}
public Integer getRent() {
return rent;
}
public void setRent(Integer rent) {
this.rent = rent;
}
public double getWaterMeter() {
return waterMeter;
}
public void setWaterMeter(double waterMeter) {
this.waterMeter = waterMeter;
}
public double getPowerMeter() {
return powerMeter;
}
public void setPowerMeter(double powerMeter) {
this.powerMeter = powerMeter;
}
public Integer getNetwork() {
return network;
}
public void setNetwork(Integer network) {
this.network = network;
}
public Integer getClean() {
return clean;
}
public void setClean(Integer clean) {
this.clean = clean;
}
public double getSum() {
return sum;
}
public void setSum(double sum) {
this.sum = sum;
}
public User getUsers() {
return users;
}
public void setUsers(User users) {
this.users = users;
}
@Override
public String toString() {
return "MonthCost{" +
"houseId='" + houseId + '\'' +
", bookerId=" + bookerId +
", yearsMonth=" + yearsMonth +
", rent=" + rent +
", waterMeter=" + waterMeter +
", powerMeter=" + powerMeter +
", network=" + network +
", clean=" + clean +
", sum=" + sum +
", users=" + users +
'}';
}
}
3.服务层
接口类:
package com.myhomes.biz;
import com.myhomes.entity.MonthCost;
import com.myhomes.entity.User;
import java.util.List;
public interface MonthCostBiz {
MonthCost searchLastMonthMeterByHouseId(String houseId);
void addMonthCost(MonthCost monthCost);
List<MonthCost> searchAllMonthCost();
List<MonthCost> searchByCondition(List<User> userList, String houseId);
List<MonthCost> searchMonthCost(String bookerName,String houseId);
}
实现类:
package com.myhomes.biz.impl;
import com.myhomes.biz.MonthCostBiz;
import com.myhomes.dao.MonthCostDao;
import com.myhomes.entity.MonthCost;
import com.myhomes.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Service;
import java.util.List;
@Service("monthCostBiz")
public class MonthCostBizImpl implements MonthCostBiz {
@Autowired
@Qualifier(value = "monthCostDao")
private MonthCostDao monthCostDao;
public MonthCost searchLastMonthMeterByHouseId(String houseId) {
return monthCostDao.selectLastMonthMeterByHouseId(houseId);
}
public void addMonthCost(MonthCost monthCost) {
monthCostDao.insertMonthCost(monthCost);
}
public List<MonthCost> searchAllMonthCost() {
return monthCostDao.selectAllMonthCost();
}
public List<MonthCost> searchByCondition(List<User> userList, String houseId) {
return monthCostDao.selectByCondition(userList,houseId);
}
public List<MonthCost> searchMonthCost(String bookerName, String houseId) {
return monthCostDao.selectMonthCost(bookerName,houseId);
}
}
4.控制器层
package com.myhomes.controller;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.myhomes.biz.HouseBiz;
import com.myhomes.biz.MonthCostBiz;
import com.myhomes.biz.UserService;
import com.myhomes.entity.House;
import com.myhomes.entity.MonthCost;
import com.myhomes.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Controller("monthCostTableController")
@RequestMapping(value = "/MonthCostTable")
public class MonthCostTableController {
private Map<String,Object> result = new HashMap<>();
@Autowired
private MonthCostBiz monthCostBiz;
@Autowired
private HouseBiz houseBiz;
@RequestMapping(value = "/tolist")
public String toList(){
return "count_house_table";
}
@RequestMapping(value = "/list")
@ResponseBody
public Map<String,Object> getList(@RequestParam(name = "pageNo",defaultValue = "1")int pageNo,@RequestParam(name = "pageSize",defaultValue = "10") int pageSize,
@RequestParam(name = "usersName",defaultValue = "")String usersName,@RequestParam(name = "houseId",defaultValue = "") String houseId){
//System.out.println("第一:usersName:"+usersName+"houseId"+houseId);
List<House> houseList = houseBiz.searchAllHouseId();
result.put("houseList",houseList);
List<MonthCost> monthCostList;
//设置分页参数
PageHelper.startPage(pageNo,pageSize);
//查询数据
monthCostList = monthCostBiz.searchMonthCost(usersName,houseId);
//使用PageInfo封装查询结果
PageInfo<MonthCost> pageInfo = new PageInfo<MonthCost>(monthCostList);
//总记录数
//long total = pageInfo.getTotal();
//上一页
Integer prePage = pageInfo.getPrePage();
//下一页
Integer nextPage = pageInfo.getNextPage();
//总数页
Integer pages = pageInfo.getPages();
//当前页
Integer pageNum = pageInfo.getPageNum();
//当前页数据列表
List<MonthCost> monthCosts = pageInfo.getList();
result.put("monthCostList",monthCosts);
result.put("prePage",prePage);
result.put("nextPage",nextPage);
result.put("pages",pages);
result.put("pageNum",pageNum);
return result;
}
}
5.前端
页面:
top.jsp:
<li id="manager_a"><b>基本管理</b></li>
<a id="user_manager_a" href="/user/listAll">人员管理</a>
<a id="house_manager_a" href="/house/listAll">房间管理</a>
<a id="send_manager_a" href="">留言管理</a>
<li id="service_li"><b>业务管理</b></li>
<a id="count_a" onclick="javascript:window.location.href='/count/view';">计算房租</a>
<a id="sum_a" onclick="javascript:window.location.href='/MonthCostTable/tolist';">查看房租</a>
数据页面:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<jsp:include page="top.jsp"></jsp:include>
<section id="right">
<a id="user_local">
业务管理 -> 每月房租
</a>
<div id="list_mean_div">
<form>
<div id="list_div_top"></div>
<a id="name_a"><b>租客名字:</b></a>
<input id="month_cost_name_text" type="text" name="name" maxlength="20" placeholder="输入租客名字..."/>
<a id="month_cost_house_a"><b>房号:</b></a>
<select id="month_cost_house_select" name="houseId">
<%--selected:默认选择该选项;--%>
<%--disabled:该选项不能被鼠标选择;(注:选项没有被隐藏的时候)--%>
<%--style="display:none":隐藏该选项;(注:该选项不会出现在下拉列)--%>
<%--value="":该选项value为“”;(注:可做表单验证)--%>
<option selected disabled style="display:none" value="">选择房号</option>
</select>
<input type="button" id="month_cost_search_button" value="搜索">
<label id="month_cost_label" style="color: red;">注意:月总金额包含清洁费10元,水费2.5元/度,电费1.5元/度。</label>
</form>
<br/><br/><br/>
<hr/>
</div>
<div id="month_cost_table_div">
<table id="month_cost_table" border="0" cellpadding="0" cellspacing="0">
<colgroup>
<col align="center" width="0px" hidden>
<col align="center" width="75px">
<col align="center" width="50px">
<col align="center" width="75px">
<col align="center" width="40px">
<col align="center" width="50px">
<col align="center" width="50px">
<col align="center" width="30px">
<col align="center" width="40px">
<col align="center" width="40px">
</colgroup>
<thead>
<tr>
<th hidden>id</th>
<th>房客姓名</th>
<th>房间号</th>
<th>记录房租时间</th>
<th>月租金</th>
<th>水表数</th>
<th>电表数</th>
<th>网费</th>
<th>月总金额</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="/js/monthCountTable.js"></script>
</section>
<jsp:include page="buttom.jsp"></jsp:include>
js部分:
$(document).ready(function(){
on_ready();
});
function on_ready() {
$.ajax({
type:"get",
url:"/MonthCostTable/list?pageNo=1",
success:function (data) {
for (var i = 0;i < data.houseList.length;i++){
var houseIdList = "<option value='" + data.houseList[i].houseId + "'>" + data.houseList[i].houseId + "</option>";
$("select").append(houseIdList);
}
$("tbody").find("tr").remove();
if(data.monthCostList.length !== 0){
for (var i = 0;i < data.monthCostList.length ;i++){
var monthCostList = "<tr>"+
"<td hidden>"+data.monthCostList[i].idNum+"</td>"+
"<td align='center'>"+data.monthCostList[i].users.name+"</td>"+
"<td align='center'>"+data.monthCostList[i].houseId+"</td>"+
"<td align='center'>"+data.monthCostList[i].yearsMonth+"</td>"+
"<td align='center'>"+data.monthCostList[i].rent+"</td>"+
"<td align='center'>"+data.monthCostList[i].waterMeter+"</td>"+
"<td align='center'>"+data.monthCostList[i].powerMeter+"</td>"+
"<td align='center'>"+data.monthCostList[i].network+"</td>"+
"<td align='center'>"+data.monthCostList[i].sum+"</td>"+
"<td align='center' id='updelect_td'><a id='update_a' href='/MonthCostTable/to_update?id="+data.monthCostList[i].idNum+"' id='update_a'>修改</a></td>"+
"</tr>";
$("tbody").append(monthCostList);
}
var page = "<div style='position: absolute;background-color: white;width: 1100px;height: 23px;'>"+
"<a id='pageNum'>当前第"+data.pageNum+"页,一共有"+data.pages+"页</a>"+
"<a id='data_pageNum' hidden>"+data.pageNum+"</a>"+
"<a id='data_pages' hidden>"+data.pages+"</a>"+
"<a id='beforePage' onclick='myPrePage()'>上一页</a>"+
"<a id='data_prePage' hidden>"+data.prePage+"</a>"+
"<a id='nextPage' onclick='myNextPage()'>下一页</a>"+
"<a id='data_nextPage' hidden>"+data.nextPage+"</a>"+
"</div>";
$("table").find("div").remove();
$("table").append(page);
}else{
var html = "<tr><td align='center' colspan='8'>没有查找到任何数据</td></tr><td><br><br></td>";
$("table").find("*").remove();
$("tbody").append(html);
}
},
error:function () {
alert("系统出错!");
}
});
}
//点击上一页执行的代码
function myPrePage() {//alert("当前页:"+$("#data_pageNum").text()+"当前页的上一页:"+$("#data_prePage").text()+"当前页的下一页:"+$("#data_nextPage").text());
//如果上一页页码为0,则return false;
//上一页页码
var prePage = $("#data_prePage").text();
//获取租客名字
var usersName = $("#month_cost_name_text").val();
//获取用户所选的房间号
var houseId = $("#month_cost_house_select").val();
//alert("上一页页码:"+prePage);
if (prePage !== "0"){
$.ajax({
type:"get",
url:"/MonthCostTable/list?pageNo="+prePage+"&usersName="+usersName+"&houseId="+houseId,
success:function (data) {
for (var i = 0;i < data.houseList.length;i++){
var houseIdList = "<option value='" + data.houseList[i].houseId + "'>" + data.houseList[i].houseId + "</option>";
$("select").append(houseIdList);
}
$("tbody").find("tr").remove();
if(data.monthCostList != null){
for (var i = 0;i < data.monthCostList.length ;i++){
var monthCostList = "<tr>"+
"<td hidden>"+data.monthCostList[i].idNum+"</td>"+
"<td align='center'>"+data.monthCostList[i].users.name+"</td>"+
"<td align='center'>"+data.monthCostList[i].houseId+"</td>"+
"<td align='center'>"+data.monthCostList[i].yearsMonth+"</td>"+
"<td align='center'>"+data.monthCostList[i].rent+"</td>"+
"<td align='center'>"+data.monthCostList[i].waterMeter+"</td>"+
"<td align='center'>"+data.monthCostList[i].powerMeter+"</td>"+
"<td align='center'>"+data.monthCostList[i].network+"</td>"+
"<td align='center'>"+data.monthCostList[i].sum+"</td>"+
"<td align='center' id='updelect_td'><a id='update_a' href='/MonthCostTable/to_update?id="+data.monthCostList[i].idNum+"' id='update_a'>修改</a></td>"+
"</tr>";
$("tbody").append(monthCostList);
}
$("#pageNum").text("当前第"+data.pageNum+"页,一共有"+data.pages+"页");
$("#data_pageNum").text(data.pageNum);
$("#data_pages").text(data.pages);
$("#data_prePage").text(data.prePage);
$("#data_nextPage").text(data.nextPage);
//$("table").append(page);
}else{
alert("系统出错!");
}
}
});
}else {
alert("当前页为首页");
}
}
//点击下一页执行的代码
function myNextPage() {//alert("当前页:"+$("#data_pageNum").text()+"当前页的上一页:"+$("#data_prePage").text()+"当前页的下一页:"+$("#data_nextPage").text());
//如果当前页码与总页码不同,则获取下一页页码,并查找;如果当前页码与总页码相同,则return false;
//当前页码
var pageNum = $("#data_pageNum").text();
//总页码
var pages = $("#data_pages").text();
//下一页页码
var nextPage = $("#data_nextPage").text();
//获取租客名字
var usersName = $("#month_cost_name_text").val();
//获取用户所选的房间号
var houseId = $("#month_cost_house_select").val();
if (pageNum !== pages) {
$.ajax({
type:"get",
url:"/MonthCostTable/list?pageNo="+nextPage+"&usersName="+usersName+"&houseId="+houseId,
success:function (data) {
for (var i = 0;i < data.houseList.length;i++){
var houseIdList = "<option value='" + data.houseList[i].houseId + "'>" + data.houseList[i].houseId + "</option>";
$("select").append(houseIdList);
}
$("tbody").find("tr").remove();
if(data.monthCostList != null){
for (var i = 0;i < data.monthCostList.length ;i++){
var monthCostList = "<tr>"+
"<td hidden>"+data.monthCostList[i].idNum+"</td>"+
"<td align='center'>"+data.monthCostList[i].users.name+"</td>"+
"<td align='center'>"+data.monthCostList[i].houseId+"</td>"+
"<td align='center'>"+data.monthCostList[i].yearsMonth+"</td>"+
"<td align='center'>"+data.monthCostList[i].rent+"</td>"+
"<td align='center'>"+data.monthCostList[i].waterMeter+"</td>"+
"<td align='center'>"+data.monthCostList[i].powerMeter+"</td>"+
"<td align='center'>"+data.monthCostList[i].network+"</td>"+
"<td align='center'>"+data.monthCostList[i].sum+"</td>"+
"<td align='center' id='updelect_td'><a id='update_a' href='/MonthCostTable/to_update?id="+data.monthCostList[i].idNum+"' id='update_a'>修改</a></td>"+
"</tr>";
$("tbody").append(monthCostList);
}
$("#pageNum").text("当前第"+data.pageNum+"页,一共有"+data.pages+"页");
$("#data_pageNum").text(data.pageNum);
$("#data_pages").text(data.pages);
$("#data_prePage").text(data.prePage);
$("#data_nextPage").text(data.nextPage);
//$("table").append(page);
}else{
alert("系统出错!");
}
}
});
}else{
alert("已经是最后一页了!");
}
}
$("#month_cost_search_button").click(function () {
//alert($("#month_cost_name_text").val()+"--"+$("#month_cost_house_select").val());
var usersName = $("#month_cost_name_text").val();
var houseId = $("#month_cost_house_select").val();
//当前页码
var pageNum = $("#data_pageNum").text();
if (usersName === "" && houseId === null){
//没有输入租客名字或者没有选择房间号则搜索表第一页数据
//alert("usersName === \"\"");
on_ready();
}else{
//alert("else");
//用户输入条件进行查询
$.ajax({
type:"get",
url:"/MonthCostTable/list?pageNo="+pageNum+"&usersName="+usersName+"&houseId="+houseId,
success:function (data) {
$("tbody").find("tr").remove();
if(data.monthCostList.length !== 0){
for (var i = 0;i < data.monthCostList.length ;i++){
var monthCostList = "<tr>"+
"<td hidden>"+data.monthCostList[i].idNum+"</td>"+
"<td align='center'>"+data.monthCostList[i].users.name+"</td>"+
"<td align='center'>"+data.monthCostList[i].houseId+"</td>"+
"<td align='center'>"+data.monthCostList[i].yearsMonth+"</td>"+
"<td align='center'>"+data.monthCostList[i].rent+"</td>"+
"<td align='center'>"+data.monthCostList[i].waterMeter+"</td>"+
"<td align='center'>"+data.monthCostList[i].powerMeter+"</td>"+
"<td align='center'>"+data.monthCostList[i].network+"</td>"+
"<td align='center'>"+data.monthCostList[i].sum+"</td>"+
"<td align='center' id='updelect_td'><a id='update_a' href='/MonthCostTable/to_update?id="+data.monthCostList[i].idNum+"' id='update_a'>修改</a></td>"+
"</tr>";
$("tbody").append(monthCostList);
}
var page = "<div style='position: absolute;background-color: white;width: 1100px;height: 23px;'>"+
"<a id='pageNum'>当前第"+data.pageNum+"页,一共有"+data.pages+"页</a>"+
"<a id='data_pageNum' hidden>"+data.pageNum+"</a>"+
"<a id='data_pages' hidden>"+data.pages+"</a>"+
"<a id='beforePage' onclick='myPrePage()'>上一页</a>"+
"<a id='data_prePage' hidden>"+data.prePage+"</a>"+
"<a id='nextPage' onclick='myNextPage()'>下一页</a>"+
"<a id='data_nextPage' hidden>"+data.nextPage+"</a>"+
"</div>";
$("table").find("div").remove();
$("table").append(page);
}else{
var html = "<tr><td align='center' colspan='8'>没有查找到任何数据</td></tr>";
$("table").find("div").remove();
$("tbody").append(html);
}
},
error:function () {
alert("系统出错!");
}
});
}
});
6.演示
步骤一、启动项目后访问网站
这里是登录后的页面
步骤二、点击“查看房租”
步骤三、测试点击上一页是否有问题
如果数据的是第一页,则不用访问服务器,让服务器减少不必要的接收用户请求操作。最右侧的XHR没有多出一条请求数据!
步骤四、测试点击下一页
XHR多了一条,没毛病。
开发者工具查看第二页接收的数据:数据一一对应呢
步骤五、页尾测试点击下一页
无意义的操作就在前端拦截了,没有交给服务器处理,右侧XHR没有新增。
步骤六、测试点击上一页
右侧XHR多了条数据。
开发者工具查看:
步骤七、输入租客名字进行模糊查询
输入“哈哈”:
点击搜索:
查询到租客名字含“哈哈”的记录
查看数据:
步骤九、查看含条件的第二页数据
下一页:
查看数据:
回到含条件的第一页:
步骤十、查询多一个条件
在原来的条件上选择房间号“A201”:
查询不存在符合条件的记录:
7.后言
完~