Ajax+Mybatis+PageHelper最强分页效果

最新推荐文章于 2022-04-14 19:26:04 发布

初级炼丹师Yiky--1229

最新推荐文章于 2022-04-14 19:26:04 发布

阅读量172

点赞数 2

分类专栏： MyBatis 文章标签： Ajax PageHelper Mybatis

本文链接：https://blog.csdn.net/weixin_44524687/article/details/119701391

版权

MyBatis 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文展示了如何使用Ajax和PageHelper在前端实现动态电影数据的分页显示。通过JavaScript函数findfilm获取指定页码的数据，利用jQuery进行DOM操作动态渲染表格，并根据返回的分页信息展示上一页、下一页和导航页链接。后台使用PageHelper进行分页查询，返回包含电影信息的PageInfo对象。

摘要由CSDN通过智能技术生成

Ajax+PageHelper最强分页效果

效果
在这里插入图片描述

不多废话直接贴代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电影展示</title>
    <script type="text/javascript" src="js/jquery-2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        function findfilm(pageNum) {
            $.ajax({
                type:"get",
                url:"/"+pageNum+"/filmpage",
                sync:"true",
                contentType:"application/json;charset=utf-8",
                dataType:"json",
                success:function (data) {
                    if(data.status==true){
                        var filmlist=data.filmPageInfo.list;//数据列表
                        var pageNum=data.filmPageInfo.pageNum;//当前页码
                        var pages=data.filmPageInfo.pages;//总页数
                        var total=data.filmPageInfo.total;//总记录数
                        var hasPreviousPage=data.filmPageInfo.hasPreviousPage;//当前页有上一页标志
                        var hasNextPage=data.filmPageInfo.hasNextPage;//当前页有下一页标志
                        //数据表格渲染
                        var fls=" <tr>\n" +
                            "            <td>编号</td>\n" +
                            "            <td>电影名</td>\n" +
                            "            <td>上映日期</td>\n" +
                            "            <td>简介</td>\n" +
                            "            <td>封面</td>\n" +
                            "            <td>操作</td>\n" +
                            "        </tr>";
                        for(var i=0;i<filmlist.length;i++){//遍历数据
                            var film=filmlist[i];
                            fls+="<tr><td>"+film.fid+"</td><td>"+film.fname+"</td><td>"+film.fdate+"</td><td>"+film.description+"</td><td>"+film.image+"</td><td>"+film.fid+"</td></tr>"
                        }
                        $("#filmtab").html(fls);
                        var pageinfo="";
                        var pagedivinfo="";
                        var uppage="";
                        var downpage="";
                        //如果有上一页或下一页就显示可点击的链接
                        if(hasPreviousPage){
                            var uppagenum=pageNum-1
                            uppage+="<a href='javascript:findfilm("+uppagenum+")'><span>上一页</span></a>"
                        }
                        if(hasNextPage){
                           var nextpagenum=pageNum+1
                          downpage+="<a href='javascript:findfilm("+nextpagenum+")'><span>下一页</span></a>";
                        }
                        //遍历导航页
                        for(var pagenum=1;pagenum<=pages;pagenum++){
                                pageinfo+="|"+"<a href='javascript:findfilm("+pagenum+")'>"+pagenum+"</a>"+"|"
                        }
                     pagedivinfo+="<a href='javascript:findfilm(1)'>首页</a>"+uppage+
                             pageinfo+downpage+
                             "<a href='javascript:findfilm("+(pages)+")'>尾页</a>"+
                             "<span class='red'>"+"当前第"+pageNum+"页.总共"+ pages +"页.一共 "+total+"条记录</span>"
                        $("#pagediv").html(pagedivinfo);
                    }else{
                        alert("查询失败！")
                        return;
                    }
                }
            });
        }
        window.onload=findfilm(1);
    </script>
</head>
<body>
    <table border="1" id="filmtab">
        <tr>
            <td>编号</td>
            <td>电影名</td>
            <td>上映日期</td>
            <td>简介</td>
            <td>封面</td>
            <td>操作</td>
        </tr>
        <tr><a href="/addFilm.html">添加</a></tr>
    </table>
    <div id="pagediv">
    </div>
</body>
</html>

后台代码

@GetMapping("/{pageNum}/filmpage")
    public Map<String,Object> findFilms(@PathVariable("pageNum") Integer pageNum){
        Map<String, Object> map = new HashMap<>();
        try {
            logger.info("调用findAllFilm方法");
            PageHelper.startPage(pageNum,2);
            List<Film> filmlist = filmService.findAllFilm();
            if(filmlist.size()>0){
                map.put("status",true);
            }else {
                map.put("status",false);
            }
            PageInfo<Film> filmPageInfo = new PageInfo<Film>(filmlist);
            map.put("filmPageInfo",filmPageInfo);
            return map;
        }catch (Exception e){
            e.printStackTrace();
            logger.error("调用findAllFilm方法失败");
        }
        return  map;
    }