Bootstrap

分页/列表分页

分页和单列表差不多,只是多加了点数据

一 : 实体类 

               1. 原生实体类 和  2.vo实体类

                vo实体类包含原生实体类的所有字段 再+新字段

                原生(数据库里的字段)

                vo(多条件查询字段  ,分页字段)

                        分页字段 : private Integer pageNum=1  //起始页

                                          private Integer pageSize =4  //显示页数

二 . jsp页面

                        1.所搜文本框
                        2.搜索按钮
                        3.列表 (table,tr,td)
                        4.文档就绪函数(想让用户一进来就看到的东西)

                              (文档就绪函数 : ) $( function() {

                                    ①取值  ②组装对象 ③调用ajax

                                     ①:获取所搜框的文本框的值

                                     ②组装对象(获取到的所搜文本框的值)

                                     ③调用ajax

                                 })

$(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.循环外追加分页按钮

                                                }

                                        }

//封装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

//给添加的按钮绑定一个点击事件
    $("#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实体类>

//给分页绑定一个方法  复制所搜框的 多加一个 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.直接返回 得到的返回值
@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语句

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类型

//分页方法
    @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();
    }

                                                

;