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

方法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());
                            break;
                        case 'ss':
                            return tf(t.getSeconds());
                            break;
                    }
                });
        }


 $(function () {
            toSomePage(1);
        });
 每次调用此函数都发送一次请求，变量pn是默认开始页面

        function toSomePage(pn) {
            $.ajax({
                url: ctx + "/SspShipVoyage/getSspShipTotalList",
                type: "post",
                data: "pn=" + pn,
                success: function (result) {
                    build_user_table(result);//构建用户表格
                    build_pagination_info(result);//构建分页信息
                    build_pagination_nav(result)//构建分页导航
                }
            })
        }：
        /**
         创建一张用户表显示读取的数据
         */

        function build_user_table(result) {
            //先清空表格，不然会直接回追加到上次查询结果上
            $("con").empty();
            //获取服务器返回的json数据
            var users = result.pageInfo.list;
            con = "";
            //$.each()是jquery的遍历方法
            $.each(users, function (index, item) {
               // var date = new Date(parseInt(item.eta));
               // date.format("yyyy-MM-dd");
               // var ww= HdUtil.Date.prototype.format(item.eta);
                var formatDate= format(item.eta, 'yyyy-MM-dd HH:mm:ss');
                con += "<tr><td>" + item.cShipNam + "</td>";
                con += "<td>" + item.iVoyage + "</td>";
                con += "<td>" + item.shipMmsi + "</td>";
                con += "<td>" +formatDate + "</td>";
                con += "<td>" + item.cargoName + "</td>";
                con += "<td>" + item.ton + "</td></tr>";
            })
            $("#con").html(con);
        }

        /**
         创建分页信息
         */
        function build_pagination_info(result) {
            $("#dataTableExample_info").empty();
            //得到服务器返回的jason数据里的分页信息，然后拼接
            var pageNum = result.pageInfo.pageNum;
            var pageSize = result.pageInfo.pages;
            var total = result.pageInfo.total;
            //"当前"+pageNum+"页,共"+pages+"页,总"+total+"条记录"
            // $("#dataTableExample_info").append("第"+ pageNum+ "至"+ pageSize+" 项，共"+ total+" 项");
            $("#dataTableExample_info").append("当前" + pageNum + "页,共" + pageSize + "页,总" + total + "条记录")
        }


        /**
         创建分页导航条：
         根据bootstrap文档里的分页说明，使用jquery创建元素。
         */
        function build_pagination_nav(result) {
            $("#dataTableExample_paginate").empty();
            //首页
            var fristPageLi = $("<li></li>").append($("<a></a>").attr("href", "javacript:void(0);").append("首页"));
            //前一页
            var prePageLi = $("<li></li>").append($("<a></a>").attr("href", "javacript:void(0);").append($("<span></span>").append("&laquo;")));
            //如果没有前一页，就让按钮不能被点击,否则绑定点击事件，重新发送ajax请求，访问相应页面
            if (result.pageInfo.hasPreviousPage == false) {
                fristPageLi.addClass("disable");
                prePageLi.addClass("disable");
            }
            else {
                fristPageLi.click(function () {
                    toSomePage(1);
                });
                prePageLi.click(function () {
                    toSomePage(result.pageInfo.pageNum - 1);
                });
            }
            var ul = $("<ul class=\"pagination\" style=\"float: right\"></ul>").addClass("pagination").append(fristPageLi).append(prePageLi);
            $.each(result.pageInfo.navigatepageNums, function (index, element) {
                var numLi = $("<li></li>").append($("<a></a>").attr("href", "javacript:void(0);").append(element));
                //如果遍历的页码等于当前页面，就高亮显示，然后添加点击事件，如果有点击，就重新发送ajax请求，访问当前页面（pn=element）
                if (result.pageInfo.pageNum == element) {
                    numLi.addClass("active");
                }
                numLi.click(function () {
                    toSomePage(element);
                })
                ul.append(numLi);
            })
            //下一页
            var nextPageLi = $("<li></li>").append($("<a></a>").attr("href", "javacript:void(0);").append($("<span></span>").append("&raquo;")));
            //末页
            var lastPageLi = $("<li></li>").append($("<a></a>").attr("href", "javacript:void(0);").append("末页"));
            //如果没有后一页，就让按钮不能被点击,否则绑定点击事件，重新发送ajax请求，访问相应页面
            if (result.pageInfo.hasNextPage == false) {
                nextPageLi.addClass("disable");
                lastPageLi.addClass("disable");
            }
            else {
                nextPageLi.click(function () {
                    toSomePage(result.pageInfo.pageNum + 1);
                });
                lastPageLi.click(function () {
                    toSomePage(result.pageInfo.pages);
                });
            }
            ul.append(nextPageLi).append(lastPageLi);
            $("<nav></nav>").append(ul).appendTo("#dataTableExample_paginate");
        }

(4)controller里返回的是json数据

 public Map<String, Object> getSspShipTotalList(@RequestParam(value="pn",defaultValue="1") Integer pn) {
        //startPage是PageHelper的静态方法，参数1：默认开始页面，参数2：每页显示数据的条数
        PageHelper.startPage(pn, 5);
        List<String> list = sspShipVoyageMapper.getSspShipTotalList();
        //使用PageInfo包装查询页面，封装了详细的分页信息.第二个参数表示连续显示的页数
        PageInfo page = new PageInfo(list,5);
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("pageInfo", page);
        return map;
    }

这是ajax请求的json数据:

总结:主要利用pageHelper的插件把List集合封装一下,SQL还是正常写.(前端用js控制)

方法2:分页

(1)效果图

(2)新增Page这个类专门为分页提供必要信息

public class Page {
 
    private int start; //开始页数
    private int count; //每页显示个数
    private int total; //总个数
    private String param; //参数
 
    private static final int defaultCount = 5; //默认每页显示5条
 
    public int getStart() {
        return start;
    }
    public void setStart(int start) {
        this.start = start;
    }
    public int getCount() {
        return count;
    }
    public void setCount(int count) {
        this.count = count;
    }
 
    public Page (){
        count = defaultCount;
    }
    public Page(int start, int count) {
        this();
        this.start = start;
        this.count = count;
    }
 
    public boolean isHasPreviouse(){
        if(start==0)
            return false;
        return true;
    }
    public boolean isHasNext(){
        if(start==getLast())
            return false;
        return true;
    }
 
    public int getTotalPage(){
        int totalPage;
        // 假设总数是50，是能够被5整除的，那么就有10页
        if (0 == total % count)
            totalPage = total /count;
            // 假设总数是51，不能够被5整除的，那么就有11页
        else
            totalPage = total / count + 1;
 
        if(0==totalPage)
            totalPage = 1;
        return totalPage;
 
    }
 
    public int getLast(){
        int last;
        // 假设总数是50，是能够被5整除的，那么最后一页的开始就是45
        if (0 == total % count)
            last = total - count;
            // 假设总数是51，不能够被5整除的，那么最后一页的开始就是50
        else
            last = total - total % count;
        last = last<0?0:last;
        return last;
    }
 
    @Override
    public String toString() {
        return "Page [start=" + start + ", count=" + count + ", total=" + total + ", getStart()=" + getStart()
                + ", getCount()=" + getCount() + ", isHasPreviouse()=" + isHasPreviouse() + ", isHasNext()="
                + isHasNext() + ", getTotalPage()=" + getTotalPage() + ", getLast()=" + getLast() + "]";
    }
    public int getTotal() {
        return total;
    }
    public void setTotal(int total) {
        this.total = total;
    }
    public String getParam() {
        return param;
    }
    public void setParam(String param) {
        this.param = param;
    }
 
}

(3)提供带分页的查询语句和获取总数的sql语句

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 
<mapper namespace="com.how2java.tmall.mapper.CategoryMapper">
    <select id="list" resultType="Category">
        select * from   category         order by id desc
        <if test="start!=null and count!=null">
            limit #{start},#{count}
        </if>
 
    </select>
    <select id="total" resultType="int">
        select count(*) from category
    </select>
</mapper>

(4)提供一个支持分页的查询方法list(Page page)和获取总数的方法total

public interface CategoryMapper {
    public List<Category> list(Page page);
 
    public int total();
}

//提供一个支持分页的查询方法list(Page page)和获取总数的方法total
public interface CategoryService{
    int total();
    List<Category> list(Page page);
}

//
@Service
public class CategoryServiceImpl  implements CategoryService {
    @Autowired
    CategoryMapper categoryMapper;
    @Override
    public List<Category> list(Page page) {
        return categoryMapper.list(page);
    }
 
    @Override
    public int total() {
        return categoryMapper.total();
    }
}

(5)控制类

@Controller
@RequestMapping("")
public class CategoryController {
    @Autowired
    CategoryService categoryService;
   
    @RequestMapping("admin_category_list")
    public String list(Model model,Page page){
        List<Category> cs= categoryService.list(page);
        int total = categoryService.total();
        page.setTotal(total);
        model.addAttribute("cs", cs);
        model.addAttribute("page", page);
        return "admin/listCategory";
    }
 
}

(6)页面布局代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
 
<script>
$(function(){
    $("ul.pagination li.disabled a").click(function(){
        return false;
    });
});
 
</script>
 
<nav>
  <ul class="pagination">
    <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
      <a  href="?start=0${page.param}" aria-label="Previous" >
        <span aria-hidden="true">«</span>
      </a>
    </li>
 
    <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
      <a  href="?start=${page.start-page.count}${page.param}" aria-label="Previous" >
        <span aria-hidden="true">‹</span>
      </a>
    </li>   
 
    <c:forEach begin="0" end="${page.totalPage-1}" varStatus="status">
                <li <c:if test="${status.index*page.count==page.start}">class="disabled"</c:if>>
                <a
                href="?start=${status.index*page.count}${page.param}"
                <c:if test="${status.index*page.count==page.start}">class="current"</c:if>
                >${status.count}</a>
            </li>
         
    </c:forEach>
 
    <li <c:if test="${!page.hasNext}">class="disabled"</c:if>>
      <a href="?start=${page.start+page.count}${page.param}" aria-label="Next">
        <span aria-hidden="true">›</span>
      </a>
    </li>
    <li <c:if test="${!page.hasNext}">class="disabled"</c:if>>
      <a href="?start=${page.last}${page.param}" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>

参考:1.http://how2j.cn/k/tmall_ssm/tmall_ssm-1517/1517.html#nowhere

2.http://how2j.cn/k/tmall_ssm/tmall_ssm-1545/1545.html()更简单)

3.https://blog.csdn.net/Edison_03/article/details/76026486

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

猜你喜欢