分页和单列表差不多,只是多加了点数据
一 : 实体类
- 原生实体类 和 2.vo实体类
vo实体类包含原生实体类的所有字段 再+新字段
原生(数据库里的字段)
vo(多条件查询字段 ,分页字段)
分页字段 : private Integer pageNum=1 //起始页
private Integer pageSize =4 //显示页数
二 . jsp页面
1.所搜文本框
2.搜索按钮
3.列表 (table,tr,td)
4.文档就绪函数(想让用户一进来就看到的东西)
(文档就绪函数 : ) $( function() {
①取值 ②组装对象 ③调用ajax
①:获取所搜框的文本框的值
②组装对象(获取到的所搜文本框的值)
③调用ajax
})
javascript
$(function () {
//取值 ajax
let carName = $("#carName").val()
let begin = $("#begin").val()
let end = $("#end").val()
//组装对象
let obj={
carName,
begin,
end
}
//调用ajax
getCarList(obj)
})在文档就绪函数的外面写封装ajax的方法
定义 : functionXXX(obj){
1.url : 请求路径
2.type: 请求方法
3.data: 数据传递
3.dataType: 解析
成功回调函数
success(res){
1.打印
2.清空数据
3.追加表头
4.使用循环 ,追加表数据
5.循环外追加分页按钮
}
}
javascript
//封装ajax
function getCarList(obj) {
$.ajax({
url:"/car/CarList", //请求路径
type:"post", //请求方法
data:{reqInfos:JSON.stringify(obj)}, //数据传递
dataType:"json", //解析
success(res){
console.log(res) //打印
//取值 nextPage
let arr=res.data
let prevPage = res.prevPage //上一页
let nextPage = res.nextPage //下一页
let totalPage = res.totalPage //尾页
//清空表
$("#table").empty()
//追加表头
$("#table").append(`
<tr>
<td>汽车ID</td>
<td>汽车编号</td>
<td>汽车名称</td>
<td>汽车价格</td>
<td>生产日期</td>
<td>上传图片</td>
<td>汽车类型</td>
<td>汽车类型名称</td>
<td>汽车产地</td>
<td>汽车产地名称</td>
<td>操作</td>
</tr>
`)
//循环数组
for (let x of arr) {
//追加表数据
$("#table").append(`
<tr>
<td>\${x.carId}</td>
<td>\${x.carCode}</td>
<td>\${x.carName}</td>
<td>\${x.carPrice}</td>
<td>\${x.carTime}</td>
<td>\${x.imgUrl}</td>
<td>\${x.typeId}</td>
<td>\${x.typeName}</td>
<td>\${x.supplierId}</td>
<td>\${x.supplierName}</td>
<td>操作</td>
</tr>
`)
}
//循环外追加分页按钮
$("#table").append(`
<tr>
<td colspan="100">
<input type="button" value="首页" onclick="doPage(1)">
<input type="button" value="上一页" onclick="doPage(\${prevPage})">
<input type="button" value="下一页" onclick="doPage(\${nextPage})">
<input type="button" value="尾页" onclick="doPage(\${totalPage})">
</td>
</tr>
`)
},
error(){
alert("列表出不来了")
}
})
}5.在body下面写脚本
①.给所搜框绑定点击事件
1.取值 2.组装对象 3.调用ajax
②.给分页的按钮写js点击事件
1.取值
2.组装对象 多 + 一个 pageNum
3.调用ajax
javascript
//给添加的按钮绑定一个点击事件
$("#seek").click(function () {
//取值 ajax
let carName = $("#carName").val()
let begin = $("#begin").val()
let end = $("#end").val()
//组装对象
let obj={
carName,
begin,
end
}
//调用ajax
getCarList(obj)
})二 . Controller
1.接参 2.将json对象还原成Java对象 3.转换后的对象传给service 4.响应给用户
2.将json对象还原成Java对象 (参数放vo实体类)
3.传给service 返回值用: PageResult<vo实体类>
javascript
//给分页绑定一个方法 复制所搜框的 多加一个 pageNum
function doPage(pageNum) {
//取值 ajax
let carName = $("#carName").val()
let begin = $("#begin").val()
let end = $("#end").val()
//组装对象
let obj={
carName,
begin,
end,
pageNum
}
//调用ajax
getCarList(obj)
}三 . service
1.调用dao层方法获取所有数据
使用list 获取所有值
2.调用dao层方法获取总条数
举例 : int count = carDao.count(vo实体类)
3.调用分页工具类
new PageResult
(光标放到这个单词上 鼠标左键点击这个工具类中 把4个参数赋值出来)
4.直接返回 得到的返回值
javascript
@WebServlet("/car/*")
public class CarController extends BaseController{
//创建全局变量
CarServiceImpl service = new CarServiceImpl();
//列表
protected void CarList(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//接参 将json对象转换成Java对象
String reqInfos = req.getParameter("reqInfos");
//将json对象转换成Java对象
CarVo carVo = JSONObject.parseObject(reqInfos, CarVo.class);
//将转换后的对象传给service 使用返回值 : PageResult
PageResult<CarVo> list= service.CarList(carVo);
//将处理后的结果响应给用户
resp.getWriter().println(JSONObject.toJSONString(list));
}
}四 . dao
1.分页查询数据的方法
①定义sql (联查的sql语句)
②打印sql语句
③分页sql语句
sql+=" limit ?,? ";
④分页公式
int index =(起始页数-1)*条数
⑤执行sql语句
javascript
public class CarDaoImpl extends BaseDao implements CarDao {
//查询数据的方法
@Override
public List<CarVo> CarList(CarVo carVo) {
//定义sql
String sql="SELECT\n" +
" a.*,\n" +
" type_name,\n" +
" supplier_name\n" +
"FROM\n" +
" t_car a\n" +
" LEFT JOIN t_car_type b ON a.type_id = b.type_id\n" +
" LEFT JOIN t_car_supplier c ON a.supplier_id = c.supplier_id WHERE car_del=0";
//对名字进行模糊查找
if (null!=carVo.getCarName() && !carVo.getCarName().isEmpty()){
sql+=" and car_name like '%"+carVo.getCarName()+"%' ";
}
//对时间进行区间查找
if (null!=carVo.getBegin() && !carVo.getBegin().isEmpty()){
sql+=" and car_time >= '"+carVo.getBegin()+"' ";
}
if (null!=carVo.getEnd() && !carVo.getEnd().isEmpty()){
sql+=" and car_time <= '"+carVo.getEnd()+"' ";
}
//打印sql语句
System.out.println(sql);
//分页sql语句
sql+=" LIMIT ?,?";
//分页取值公式
int index = (carVo.getPageNum() - 1) * carVo.getPageSize();
//执行sql语句
return baseQueryList(CarVo.class,sql,index,carVo.getPageSize());
}
}2.分页方法
① :复制分页查询数据的方法
② : 删掉sql语句
1.获取总条数sql语句
select count (1) from 表名 where del=0
③ : 打印sql
④ : 利用反射 baQueryCount 用long
⑤ : 返回 : 手动转换成int类型
javascript
//分页方法
@Override
public int count(CarVo carVo) {
//获取总条数的sql语句
String sql="SELECT count(1) FROM t_car where car_del=0";
//对名字进行模糊查找
if (null!=carVo.getCarName() && !carVo.getCarName().isEmpty()){
sql+=" and car_name like '%"+carVo.getCarName()+"%' ";
}
//对时间进行区间查找
if (null!=carVo.getBegin() && !carVo.getBegin().isEmpty()){
sql+=" and car_time >= '"+carVo.getBegin()+"' ";
}
if (null!=carVo.getEnd() && !carVo.getEnd().isEmpty()){
sql+=" and car_time <= '"+carVo.getEnd()+"' ";
}
//打印sql语句
System.out.println(sql);
//利用反射 反射只能用long
Long count = baseQueryCount(Long.class, sql);
//手动转换int类型
return count.intValue();
}