分页查询的具体实现(两种方式)

最新推荐文章于 2024-09-10 16:41:59 发布

皮痒求锤

最新推荐文章于 2024-09-10 16:41:59 发布

阅读量481

点赞数

分类专栏：知识回顾文章标签：分页查询

本文链接：https://blog.csdn.net/weixin_44925436/article/details/90551410

版权

本文详细介绍了两种分页查询的实现方法。第一种使用AJAX和JSON进行前后端交互，通过PageHelper插件封装List集合，SQL语句保持原样。第二种方法是自定义Page类，包含分页参数，配合特定的查询和总数获取SQL，以及支持分页的控制类和页面布局代码。

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

方法1.ajax+json这种前后端交互的模式

（1）首先效果展示页面展示
在这里插入图片描述
(2)这里给出我页面布局代码：

<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 c1" id="ecommerceRecentOrder" style="margin-top:0">
                <div class="widget widget-shadow table-row" style="margin-bottom: 0">
                    <div style="font-size: 20px;padding-left: 20px;padding-top: 10px">
                        <div>预报船期数据</div>
                    </div>
                    <div class="widget-content bg-white table-responsive">
                        <table class="table table-bordered table-striped table-condensed" style="margin-bottom: 10px">
                            <thead>
                            <tr style="font-size: 14px">
                                <th>船名</th>
                                <th>航次</th>
                                &nbsp;
                                <th>IMO号</th>
                                <th>预报抵港时间</th>
                                <th>货物</th>
                                <th>吨数</th>
 
                            </tr>
                            </thead>
                            <tbody id="con">
 
                          //遍历list
 
                            </tbody>
                        </table>
                    </div>
 
                    <!-- 提示分页信息行 -->
                    <div class="row">
                        <!-- 分页文字信息 ：拿到控制器处理请求时封装在pageInfo里面的分页信息-->
                        <div class="col-sm-5" id="page_info_area">
                            <div class="dataTables_info" id="dataTableExample_info" style="margin-left: 20px">
 
                            </div>
                        </div>
                        <div class="col-sm-7">
                            <!-- 分页码 -->
                            <div class="dataTables_paginate paging_simple_numbers" id="dataTableExample_paginate" style="line-height: 32.4px">
 <!-- 
                            1.pageContext.request.contextPath表示当前项目路径，采用的是绝对路径表达方式。一般为http:localhost:8080/项目名 。
                            2.首页，末页的逻辑：pn=1访问第一次，pn=${
   pageInfo.pages}访问最后一页
                       -->
                       <!-- 如果还有前页就访问当前页码-1的页面， -->
                       <!--遍历所有导航页码，如果遍历的页码页当前页码相等就高亮显示，如果相等就普通显示  -->
                       <!-- 如果还有后页就访问当前页码+1的页面， -->
 
 
                            </div>
                        </div>
                    </div>
                </div>
            </div>

(3)js部分:

后台从数据库获取时间用需要格式化下:

//获得毫秒数 再转化为需要时间格式。形如：yyyy-MM-dd
        var format = function(time, format) {
   
            var t = new Date(time);
            var tf = function(i) {
   
                return (i < 10 ? '0': '') + i
            };
            return format.replace(/yyyy|MM|dd|HH|mm|ss/g,
                function(a) {
   
                    switch (a) {
   
                        case 'yyyy':
                            return tf(t.getFullYear());
                            break;
                        case 'MM':
                            return tf(t.getMonth() + 1);
                            break;
                        case 'mm':
                            return tf(t.getMinutes());
                            break;
                        case 'dd':
                            return tf(t.getDate());
                            break;
                        case 'HH':
                            return tf(t.getHours()