JS小案例_普通分页

最新推荐文章于 2024-07-01 11:34:43 发布

sunnyday.qiu

最新推荐文章于 2024-07-01 11:34:43 发布

阅读量259

点赞数 1

分类专栏： JS 文章标签： js jquery ajax

本文链接：https://blog.csdn.net/changyeyu_/article/details/106994618

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

知识点

瀑布流无限加载页面分页案例

在上面的案例基础上增加了前端分页插件
	jquery.simplePagination.js
	simplePagination.css

	//插件展示所需元素（）
       <div class="pagination-holder clearfix">
           <div id="light-pagination" class="pagination"></div>
       </div>
       
	//插件参数设置
	$("#light-pagination").pagination({//插件提供的方法
                    pages: pageInfo.pages,//设置总页数
                    currentPage: pageInfo.pageNum//设置当前页
                });

实现代码（前端）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站首页</title>
    <link rel="stylesheet" href="css/simplePagination.css">
</head>
<body>
    <div class="center">
        <ul class="news_list">
        </ul>

        <div class="content">
            <div class="pagination-holder clearfix">
                <div id="light-pagination" class="pagination"></div>
            </div>
        </div>

    </div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.simplePagination.js"></script>
<script>
    //1.定义当前页码和每页显示的条数
    let start = 1;
    let pageSize = 10;

    //2.调用查询数据的方法
    queryByPage(start, pageSize);

    //3.定义请求查询分页数据的函数，发起AJAX异步请求，将数据显示到页面
    function queryByPage(start, pageSize) {
        $.ajax({
            //请求的资源路径
            url: "news2",
            //请求的参数
            data: {"start": start, "pageSize": pageSize},
            //请求的方式
            type: "POST",
            //响应数据形式
            dataType: "json",
            //请求成功后的回调函数
            success: function (pageInfo) {
                //将数据显示到页面
                let titles = "";
                let list = pageInfo.list;
                /*$(list).each(function (i,e) {
                    titles += `<li><div class="title-box">
                        <a href="#" class="link">
                        ${e.title}<hr></a></div></li>`;
                    }
                );*/
                /*$.each(list, function (i,e) {
                    titles += `<li><div class="title-box">
                        <a href="#" class="link">
                        ${e.title}<hr></a></div></li>`;
                });
                */

                /*for(let e of list){
                    titles += `<li><div class="title-box">
                        <a href="#" class="link">
                        ${e.title}<hr></a></div></li>`;
                }*/

                for (let e in list){
                    titles += `<li><div class="title-box">
                        <a href="#" class="link">
                        ${list[e].title}<hr></a></div></li>`;
                }

                /*for (let i = 0; i < pageInfo.list.length; i++) {
                    titles += `<li><div class="title-box">
                        <a href="#" class="link">
                        ${pageInfo.list[i].title}<hr></a></div></li>`;
                }*/
                $(".news_list").html(titles);

                //4.为分页按钮区域设置页数参数（总页数和当前页）
                $("#light-pagination").pagination({
                    pages: pageInfo.pages,
                    currentPage: pageInfo.pageNum
                });

                //5.为分页按钮绑定单击事件,完成上一页下一页查询功能
                $("#light-pagination .page-link").click(function () {
                    //获取点击按钮的文本内容
                    let page = $(this).html();
                    //如果点击的是Prev，调用查询方法，查询当前页的上一页数据
                    if (page == "Prev") {
                        queryByPage(pageInfo.pageNum - 1, pageSize);
                    } else if (page == "Next") {
                        //如果点击的是Next，调用查询方法，查询当前页的下一页数据
                        queryByPage(pageInfo.pageNum + 1, pageSize);
                    } else {
                        //调用查询方法，查询当前页的数据
                        queryByPage(page, pageSize);
                    }
                });
            }
        });
    }
</script>
</html>

实现代码（后端）

//封装mybatis分页插件的PageInfo对象
PageInfo<List> pageInfo = new PageInfo(List<Datas>);//List<Datas> 为查询数据库返回的数据，Datas为自定义实体对象

sunnyday.qiu

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录