分页查询的简单实现

客官°小女子只卖身不卖艺 2022-06-15 03:39 287阅读 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="#">«</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 >»</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的样式简单够用了
 *  没有缓存，效率太低了