SpringBoot JPA jQuery 分页查询

最新推荐文章于 2024-02-23 08:32:22 发布

lionel_zsj

最新推荐文章于 2024-02-23 08:32:22 发布

阅读量404

点赞数

分类专栏： SpringBoot

本文链接：https://blog.csdn.net/lionel_zsj/article/details/99701314

版权

SpringBoot 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

SpringBoot JPA jQuery 分页查询

效果

[外链图片转存失败(img-3kx9TRsw-1566091449841)(C:\Users\zsj55\AppData\Roaming\Typora\typora-user-images\1566091231875.png)]

controller

 @RequestMapping("fbian/{id}/{name}")
    public OrderProduct findByIdAndName(@PathVariable("id") String id, @PathVariable("name") String name){
        return orderProductService.findByIdAndName(id,name);
    }

service

public Page<OrderProduct> findAll(int page, int limit){
        Pageable pageable = PageRequest.of(page,limit);
        Page<OrderProduct> pageinfo = orderProductRespository.findAll(pageable);
        return pageinfo;
    }

Repository

public interface OrderProductRespository extends JpaRepository<OrderProduct,String> {

    @Query("select op from OrderProduct op where id=?1 and productName=?2")
    public OrderProduct findByIdAndName(String id, String name);
}

html

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script src="js/page.js"></script>
</head>
<body>

<div class="container">
    <h2>响应式表格</h2>
    <p>.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）:</p>
    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr>
                <th>id</th>
                <th>productName</th>
                <th>productPrice</th>
                <th>productType</th>
            </tr>
            </thead>
            <tbody id="databody"></tbody>
        </table>
     </div>




    <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-6">
            <ul class="pagination">

            </ul>
        </div>
        <div class="col-sm-3"></div>
    </div>
</div>

</body>
</html>

$(document).ready(function(){
    var currentPage = 0;
    getData();

    function getData(){
        $.getJSON("pcontroller/page",{page:currentPage},function (json) {
            var content = json.content;
            $("#databody").empty();
            for(var i = 0; i < content.length; i++){
                $("#databody").append(
                    "<tr>" +
                    "<td>"+json.content[i].id+"</td>" +
                    "<td>"+json.content[i].productName+"</td>" +
                    "<td>"+json.content[i].productPrice+"</td>" +
                    "<td>"+json.content[i].productType+"</td>" +
                    "</tr>"
                );
            }

            var totalPages = json.totalPages;
            $(".pagination").empty();
            $(".pagination").append('<li class=""><a class="page-link" href="#" id="firstpage">首页</a></li>');
            $(".pagination").append('<li class=""><a class="page-link" href="#" id="previouspage">上一页</a></li>');
            for(var j = 0; j < totalPages; j++){
                $(".pagination").append(
                    '<li class="page-item" id="pageno'+j+'"><a class="page-link" href="#">'+(j+1)+'</a></li>'
                );
            }
            $(".pagination").append('<li class=""><a class="page-link" href="#" id="nextpage">下一页</a></li>');
            $(".pagination").append('<li class=""><a class="page-link" href="#" id="lastpage">尾页</a></li>');


            //显示当前页数
            $(".page-item").removeClass("active");
            $("#pageno"+currentPage).addClass("active");


            //下一页
            $("#nextpage").click(function () {
                if(currentPage < totalPages-1){
                    var curr = new Number(currentPage);
                    currentPage = curr+1;
                    getData();
                }
                else{
                    alert("这是最后一页");
                }

            });


            //上一页
            $("#previouspage").click(function () {
                if(currentPage > 0){
                    var curr = new Number(currentPage);
                    currentPage = curr-1;
                    getData();
                }
                else{
                    alert("这是第一页");
                }
            });


            $(".page-item").click(function () {
                var idval = this.id;
                currentPage = idval.substr(6);
                getData();
            });

            $("#firstpage").click(function () {
                currentPage = 0;
                getData();
            });


            $("#lastpage").click(function () {
                currentPage = totalPages-1;
                getData();
            });



        });
    }
});

   });


        $("#lastpage").click(function () {
            currentPage = totalPages-1;
            getData();
        });



    });
}

});

lionel_zsj

关注

0
点赞
踩
2

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录