1.后台sql语句 -Dao层

这里标** 代表关键代码

public List<Video> selectAll2(Map<String, String> parm, Integer pageNo, Integer pageSize) {
    ArrayList<Video> list = new ArrayList<>();
    Connection conn = JDBCUtils.getConnection();
    //**
    String sql="select * from t_video where 1=1";
    if(parm!=null ){
        //模糊匹配 按类别匹配
        if(parm.get("class")!=null && !parm.get("class").equals("")){
            sql+=" and v_class like '%"+parm.get("class")+"%'";
        }
        //            按类别进行排序搜索
        else if(parm.get("orderByType")!=null && !parm.get("orderByType").equals("")){
            sql+=" and v_class='"+parm.get("orderByType")+"' order by v_amount desc";
        }else if(parm.get("searchTitle")!=null && !parm.get("searchTitle").equals("")){
            sql+=" and v_title like '%"+parm.get("searchTitle")+"%'";
        }
    }
    //        拼接分页条件
    //        开始条数 zh  
    //sql语句 这里是动态拼接 拼接好后 进行限制条数 比如
    // select * from t_video where 1=1 limit 0,5; 从第0条开始数5条数据 ,拼接结束后进行遍历
    Integer startIndex =pageSize *(pageNo-1);
    sql+=" limit "+startIndex+" ,"+pageSize+"";
    PreparedStatement pstm=null;
    ResultSet rs=null;
    try {
        pstm = conn.prepareStatement(sql);
        rs =pstm.executeQuery();
        while(rs.next()){
            //                private String videoClass;
            //                private int videoAmount;
            //                private int videoLike;
            //                private int userId;
            //                private String url;
            //                private String pic;
            int videoId = rs.getInt("v_id");
            String videoClass = rs.getString("v_class");
            int videoLike =rs.getInt("v_like");
            int videoAmount = rs.getInt("v_amount");
            String videoTitle=rs.getString("v_title");
            String videoIntro=rs.getString("v_introduce");
            Date videoPbtime=rs.getDate("v_pbtime");
            int userId=rs.getInt("u_id");
            String url=rs.getString("url");
            String pic=rs.getString("v_pic");
            Video video = new Video(videoId, videoTitle, videoIntro, videoPbtime, videoClass, videoAmount, videoLike, userId, url, pic);
            list.add(video);
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }finally {
        JDBCUtils.closeAll(conn,pstm,rs);
    }
    return list;
    }

2.servlet部分

从前端接收到当前页数和页尺寸后进行判断，传到service层和dao层中。进行查找并返回list集合

 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter out = resp.getWriter();
        Map<String,Object> result=new HashMap<>();
        String oper=req.getParameter("oper");//获取操作码
        String msg = req.getParameter("msg");
        HashMap<String, String> map = new HashMap<>();//存储数据用
      if(oper!=null && oper.equals("searchVideo")){
            String pageNo = req.getParameter("pageNo");
            String pageSize = req.getParameter("pageSize");
            String titleName = req.getParameter("titleName");
            if(pageNo==null || pageNo.equals("")){
                pageNo="1";
            }
            if(pageSize==null || pageSize.equals("")){
                pageSize="5";
            }
            map.put("searchTitle",titleName);
            List<Video> videos = videoService.selectVideo(map, Integer.parseInt(pageNo), Integer.parseInt(pageSize));
            List<User> userList = videoService.queryUserByVideo(videos);//视频作者用户列表
            Integer count =videoService.selectCount(map);
            result.put("count",count);
            result.put("data", videos);
            result.put("userList",userList);
        }
        //对象转换为json串
        String json= JSON.toJSONString(result);
        out.print(json);
        out.flush();
        out.close();

3.前台动态对接分页数据

function getSearchInfo(name) {
    if(name!=null && name!="")
    {
        page_no =1;
    }
    //使用ajax获取后台数据
    var oper ="searchVideo"
    $.ajax({
        url:"video.do",
        data:{titleName:name,oper:oper,"pageNo":page_no,"pageSize":page_size},
        dataType:"json",
        success:function (data) {
            alert("1124");
            //获取前台信息
            var list =  data.data;
            var userList = data.userList;
            count =data.count;
            $("#pagelist").html("");
            $("#div4").html("");
            console.log(list);
            for (let i = 0; i <page_size && i<list.length; i++) {
                var item =list[i];
                var userItem =userList[i];
                var author =userItem.userName;
                var title =item.videoTitle;
                var pic =item.pic;
                var content="<div> \n" +
                    " <img src=\"./img/"+pic+"\" alt=\"\" />\n" +
                    "            <p style=\"text-overflow: ellipsis\">"+title+"</p>\n" +
                    "<em class=\"bott-1\">" +
                    "<i class=\"fa fa-video\" style=\"color: white; margin-right: 5px\"></i>\n" +
                    "              <span style=\"margin-right: 15px\">43.5万</span>\n" +
                    "<i class=\"fa fa-mercury\"></i>\n" +
                    "<span>11.1万</span>\n" +
                    "<i style=\"margin-left: 24px\">01:43</i>\n" +
                    "</em>\n" +
                    "<span class=\"up\" style=\"color: #999999; margin-top: 15px\">UP</span>"+author+"\n" +
                    "</div>\n"
                $("#div4").append(content);
            }
//===================== 分页部分===================================================
            //分页需要2.1 向上取整。对总数和页大小要取整   然后根据页数进行遍历
            var totalPageNum =Math.ceil(count/page_size);
            totalPage = totalPageNum;
            console.log(totalPageNum);
            for (let i = 0; i <totalPageNum; i++) {
                $("#pagelist").append("<button class='pagenum'>"+(i+1)+"</button>");
            }
        }
    })
}

4.分页限制页的判断

在点击上一页和下一页时，要注意判断当前页是不是最后一页或者第一页不能再往前和往后了

4.1上一页限制

 //上一页事件
    $(".pre_page").click(function () {
        page_no--;
        if(page_no==0){
            page_no=1;
            alert("没有上一页了")
        }
        // getSearchInfo();
        judgement();
    })

4.2下一页限制

 //下一页事件
    $(".next_page").click(function () {
     console.log("page_no="+page_no+",totalPage="+totalPage)
     if(page_no==totalPage){
         page_no==totalPage;
         // getSearchInfo();
         judgement();
         alert("当前页已是最后一页")
     }else{
         page_no++;
         // getSearchInfo();
         judgement();
     }
    })

5.分页问题

5.1 搜索后分页问题

在进行搜索后分页，点击下一页会刷新成所有数据而不是搜索后数据，解决方法，写一个判断函数，对是否有参数进行判断，代码如下。

function judgement() {
    if(titleInput==""){
        getSearchInfo()
    }else{
        getSearchInfo(titleInput);
    }
}

对搜索框内容设置一个全局变量，搜索时，传入该参数。页面刷新时，对搜索框有无内容进行判断。

5.2 在第二页搜索时，搜索不到数据

原因是，数据不够。每次搜索后，结果都是从第一页开始计算。举例，有8条数据，按10页分页，在第二页搜索时，得不到数据，原因是页面都是page_no ==1中。若是有15条数据，第二页只有5条。第一页铺满
解决方法：

if(name!=null && name!="")
    {
        page_no =1;
    }

在有参数的渲染函数中，设置页面为第一页。不过只适用于数据条目少的时候。数据多的时候还没试验过，遇到再记录

编程笔记

分页功能前后台实现