分页查询的简单实现

最新推荐文章于 2024-07-05 16:59:23 发布

Skylrk

最新推荐文章于 2024-07-05 16:59:23 发布

阅读量1.6k

点赞数 1

分类专栏： JAVA 文章标签： hibernate spring mvc 分页查询 ajax

本文链接：https://blog.csdn.net/u011510678/article/details/72637100

版权

JAVA 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

分页查询的简单实现

分页查询无非有两种实现方式:
1. 将数据库中全部数据读取出来, 在分段获取
2. 直接读取需要显示的数据条数

使用第一种方法需要专门的缓存服务器，第二种方法适用在小流量使用的情况，这里简单的使用第二种方法实现。
流程：
1. 获取总记录数
2. 前端计算分页
3. 传递第几页，对应查询
4. 返回封装好的json

实例项目框架：

Hibernate
SpringMVC
Jq

Hibernate 分页查询

Hibernate实现分页查询是很简单的。

public static ArrayList<Product> queryAllInfo(int currentPage, int limitPage) {
        String hql = "from Product";
        session = HibernateSessionFactory.getSession();
        Query q = session.createQuery(hql);
        q.setFirstResult((currentPage-1)*limitPage);
        q.setMaxResults(limitPage);
        ArrayList<Product> l = (ArrayList<Product>) q.list();
        return l;
}

SpringMVC

SpringMVC的强大就不多说了，这里直接用注解了。

@RequestMapping("getProductCount")
public void getProductCount(HttpServletResponse response, HttpServletRequest request)throws IOException {
        // 总记录数
        int count = Math.toIntExact(ProductDAO.ProductCount());
        // 通过 PrintWrite方法返回数据
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.print(count);
        return;
}
// 使用ResponseBody注解 设置RequestMapping的produces值，就可以直接返回json
@RequestMapping(value = "queryInfo", produces = "application/json;charset=UTF-8")
@ResponseBody 
public String queryInfo(String currentPage, String limitPage) {
    ArrayList<Product> list = ProductDAO.queryAllInfo(Integer.parseInt(currentPage), Integer.parseInt(limitPage));
    if (list.size() > 0) {
        // 封装为json字符串 建议可以使用Gson 简单无比
        String str = GsonUtil.listPtoJson(list);
        return str;
    }
    return null;
}

前端使用jq

使用jq的ajax获取json数据，使用BootStrap让样式好看点

<html>
<head>
    <meta charset="utf-8">
    <title>Blank Page</title>
    <link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
    <div>
        <div class="row">
            <%--table 表格的div--%>
            <div class="table-responsive">
                <table id="allproduct_tb" class="table table-hover tablesorter">
                    <thead>
                    <tr>
                    <th>产品名称 <i class="fa fa-sort"></i></th>
                    <th>产品价格 <i class="fa fa-sort"></i></th>
                    <th>供应商 <i class="fa fa-sort"></i></th>
                    <th>联系人电话 <i class="fa fa-sort"></i></th>
                    <th> 选中</th>
                    </tr>
                    </thead>
                </table>
            </div>
            <%--/table--%>
            <%-- pagination 选页的div   --%>
           <div>
                <%--使用Bottstrap的 分页组件--%>
                <ul class="pagination">
                    <li><a href="#">&laquo;</a></li>
                </ul>
            </div>
            <%-- /pagination--%>
        </div>
    </div>
<script src="js/jquery-1.10.2.js"></script>
<script>
    var count
    var currentPage = 1
    var limitPage = 4
    var pageCount
//     注意要先全局设置同步 避免还没获取数据就计算页数
    $.ajaxSetup({
        async: false
    });
    $(document).ready(function () {
//        先在页面加载完成后自动获取总页数
        $.get("mvc/getProductCount.do", function (data, status) {
//            注意要把值转为数字
            count = parseInt(data)
        })
//        计算一共有多少页
        if (count <= limitPage) {
            pageCount = 1
        } else if ((count % limitPage) == 0) {
            pageCount = count / limitPage
        } else {
            pageCount = (count / limitPage) + 1
        }
//        根据页数来动态显示
        for (var i = 0; i < pageCount; i++) {
            var li = " <li><a href=\"javascript:void(0)\" onclick=\"getProducInfo(" + (i + 1) + ")\">" + (i + 1) + "</a></li>"
            $(".pagination").append(li)
        }
        $(".pagination").append("<li><a  >&raquo;</a></li>")

//        显示第一页的数据 从0行开始 显示多少行记录
//        获取json
        var urlstr = "mvc/queryInfo.do?currentPage=" + currentPage + "&limitPage=" + limitPage
        $.getJSON(urlstr, function (json) {
            $("#allproduct_tb").html('<thead> <tr> <th>产品名称 <i class="fa fa-sort"></i></th><th>产品价格 <i class="fa fa-sort"></i></th> <th>供应商 <i class="fa fa-sort"></i></th> <th>联系人电话 <i class="fa fa-sort"></i></th> </tr> </thead>');
            $.each(json, function (index, item) {
                //循环获取数据
                var price = json[index].pPrice;
                var id = json[index].id
                var name = json[index].pName;
                var supplier = json[index].pSupplier;
                var phone = json[index].pPhone;
                var tbBody = "<tr><td><a href=\"javascript:void(0)\" onclick=\"getProducInfo(" + id + ")\">" + name + "</a></td><td>" + price + "</td><td>" + supplier + "</td><td>" + phone + "</td><td><input type=checkbox /></td></tr>"
                $("#allproduct_tb").append(tbBody)
            })
        })
    })

    function getProducInfo(currentPage) {
        var urlstr = "mvc/queryInfo.do?currentPage=" + currentPage + "&limitPage=" + limitPage
        $.getJSON(urlstr, function (json) {
            $("#allproduct_tb").html('加载中...');
            $("#allproduct_tb").html('<thead> <tr> <th>产品名称 <i class="fa fa-sort"></i></th><th>产品价格 <i class="fa fa-sort"></i></th> <th>供应商 <i class="fa fa-sort"></i></th> <th>联系人电话 <i class="fa fa-sort"></i></th> </tr> </thead>');
            $.each(json, function (index, item) {
                //循环获取数据
                var price = json[index].pPrice;
                var id = json[index].id
                var name = json[index].pName;
                var supplier = json[index].pSupplier;
                var phone = json[index].pPhone;
                var tbBody = "<tr><td><a href=\"javascript:void(0)\" onclick=\"getProducInfo(" + id + ")\">" + name + "</a></td><td>" + price + "</td><td>" + supplier + "</td><td>" + phone + "</td><td><input type=checkbox /></td></tr>"
                $("#allproduct_tb").append(tbBody)
            })
        })
    }
</script>
</body>
</html>

总结

使用jq的ajax比较灵活简单
bootstrap的样式简单够用了
没有缓存，效率太低了

Skylrk

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分页查询的简单实现

分页查询的简单实现分页查询无非有两种实现方式: 1. 将数据库中全部数据读取出来, 在分段获取 2. 直接读取需要显示的数据条数使用第一种方法需要专门的缓存服务器，第二种方法适用在小流量使用的情况，这里简单的使用第二种方法实现。流程： 1. 获取总记录数 2. 前端计算分页 3. 传递第几页，对应查询 4. 返回封装好的json实例项目框架：HibernateSpringMVC
复制链接

扫一扫

专栏目录