SSM实现简单的分页

作者: _借东西的小人 | 来源:发表于2018-05-31 15:20 被阅读1次

SSM实现简单的分页
SSM整合+简单的增删改查
SSM框架——实现分页和搜索分页
简单分页实现
小白浅谈SSM框架的整合思路&功能实现
Elasticsearch from+size 分页
PHP与mysql的分页功能
RecyclerView的刷新分页
Pagehelper分页插件的使用
2018-04-10 SSM框架PageHelper分页

我理解的分页有三种方式：
第一种：前台选择相对应的操作（如首页、下一页等），点击的同时传递参数到后台，后台通过接受的参数调用相应的方法实现分页。
第二种：前台选择相应的操作，调用js部分编写的相对应的方法，后台只接收每一页的起始值和结束值，实现分页。
第三种：假分页，先将数据全部查询出来，通过前台控制显示，但是后台不实现分页（不推荐使用）。我给大家分享的是第二种，由于技术有限，所以写的可能不是很好，但是功能实现了。
先从后台开始
mapper.xml

mapper namespace="com.zr.mapper.IBookMapper">
    <resultMap id="bookMap" type="book">
        <id property="id" column="book_id"/>
        <result property="name" column="book_name"/>
        <result property="author" column="book_author"/>
        <result property="price" column="book_price"/>
        <result property="cover" column="book_cover"/>
    </resultMap>

    <select id="findBooks" resultMap="bookMap">
        <![CDATA[ select a1.* from
        (select book_tab.*,rownum rn from book_tab) a1
        where rn between #{start} and #{end}
      ]]>
    </select>

    <select id="allCount" resultType="java.lang.Integer">
        select count(*) from book_tab
    </select>
</mapper>

Mapper层

public interface IBookMapper {

    /**
     * 分页显示数据
     * @param start
     * @param end
     * @return
     */
    public List<Book> findBooks(@Param("start") Integer start,@Param("end") Integer end);

    /**
     * 计算总记录数
     * @return
     */
    public Integer allCount();

}

service层

public interface IBookService {
    public Map<String,Object> findBooks(Integer pageNumber, Integer pageSize);
    public int allCount();
}

service的实现

public Map<String,Object> findBooks(Integer pageNumber, Integer pageSize) {
        List<Book> rows = iBookMapper.findBooks(pageNumber,pageSize);//将查询到的数据保存到list集合中
        Integer total = iBookMapper.allCount();
        Map<String,Object> map = new HashMap<String, Object>();
        map.put("rows",rows);
        map.put("total",total);
        return map;
    }

    public int allCount() {
        return iBookMapper.allCount();
    }

action层

@RequestMapping(value = "/findBooks.action")
    public @ResponseBody
    Map<String,Object> findBooks(Integer pageNumber, Integer pageSize){
        Map<String,Object> map =  iBookService.findBooks(pageNumber,pageSize);
        /*for (Object o : map.values()) {
              System.out.println("value= " + o);
            }*/
        return iBookService.findBooks(pageNumber,pageSize);
    }
    @RequestMapping(value = "/allCount.action")
    public @ResponseBody int allCount(){
        return iBookService.allCount();
    }

接下来是前台页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
    <script src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<table id="tab" border="1" cellspacing="0" cellpadding="0" width="650px" align="center">
    <thead style="background-color: cornsilk;">
    <th height="35px">编号</th>
    <th>书名</th>
    <th>作者</th>
    <th>价格</th>
    <th>封面</th>
    </thead>
    <tbody align="center">
    </tbody>
    <tfoot>
    <tr>
        <td colspan="5" align="center">
            每页
            <select>
                <option>5</option>
                <option>10</option>
                <option>15</option>
            </select>条|
            <span id="firstPage" style="color:red;font-weight:bold" onclick="firstPage()">首页</span>|
            <span id="prePage" style="color:red;font-weight:bold" onclick="prePage()">上一页</span>|
            <span id="nextPage" style="color:red;font-weight:bold" onclick="nextPage()">下一页</span>|
            <span id="lastPage" style="color:red;font-weight:bold" onclick="lastPage()">最后一页</span>|
            <span style="color:red;font-weight:bold">当前第<input style="width: 20px;" id="nowPage" type="text" value="1"/>页</span>|
            共<input style="width: 20px;" id="count"/>页|
            <span style="color:red;font-weight:bold">跳转至第<input style="width: 20px;" id="jumpPage" type="text"
                                                                value="1"/>页</span>
            <button onclick="jump()">确定</button>
        </td>
    </tr>
    </tfoot>

</table>
<script type="text/javascript">
    var allCount;//记录总数
    var page;//总页数
    var pageNumber = 1;//默认起始记录
    var pageSize = parseInt($("select").val());//每页记录数

    window.onload = function () {
        show();
        /*获取总记录数*/
        $.post("allCount.action", function (data) {
            allCount = data;
            pageNum();//页面被加载默认的页数
        }, "json");

    }

    /**
     * 总页数
     * */
    function pageNum() {
        if (allCount % parseInt($("select").val()) == 0) {
            page = parseInt(allCount / parseInt($("select").val()));
            $("#count").val(page);
        } else {
            page = parseInt(allCount / parseInt($("select").val())) + 1;
            $("#count").val(page);
        }
    }

    /**
     * 每页显示的条数
     * */
    $("select").change(function () {
        pageNum();
        pageSize = parseInt($("select").val());
        cha = pageSize - pageNumber;
        if (pageNumber != 1) {
            pageNumber = 1;
        }
        $("#nowPage").val("1");
        $("#jumpPage").val("1");
        show();
    });

    /**
     * 首页
     * */
    function firstPage() {
        pageNumber = 1;
        pageSize = parseInt($("select").val());
        $("#jumpPage").val("1");
        if ($("#nowPage").val() == 1) {
            alert("已经是首页了")
        }
        $("#nowPage").val("1");
        show();
    }

    /**
     * 上一页
     * */
    function prePage() {
        if (pageSize > parseInt($("select").val())) {
            $("#nowPage").val(pageSize / parseInt($("select").val()) - 1);
            $("#jumpPage").val(pageSize / parseInt($("select").val()) - 1);
            pageSize = pageNumber - 1;
            pageNumber = pageNumber - parseInt($("select").val());
            show();
        } else {
            alert("已经是首页了")
        }
    }

    /**
     * 下一页
     * */
    function nextPage() {
        if (allCount > pageSize) {
            $("#nowPage").val(pageSize / parseInt($("select").val()) + 1);
            $("#jumpPage").val(pageSize / parseInt($("select").val()) + 1);
            pageNumber = pageNumber + parseInt($("select").val());
            pageSize = pageNumber + parseInt($("select").val()) - 1;
            show();
        } else {
            alert("已经是最后一页了")
        }
    }

    /**
     * 跳转至第几页
     * */
    function jump() {
        var page = parseInt($("#jumpPage").val());
        if (page <= parseInt($("#count").val())) {
            pageSize = page * parseInt($("select").val());
            pageNumber = (page - 1) * parseInt($("select").val()) + 1;
            alert(pageNumber);
            $("#nowPage").val($("#jumpPage").val());
            show();
        } else {
            alert("该页不存在")
            $("#jumpPage").val($("#nowPage").val());

        }
    }

    /**
     * 最后一页
     * */
    function lastPage() {
        pageNumber = parseInt($("#count").val() - 1) * parseInt($("select").val()) + 1;
        pageSize = allCount;
        $("#jumpPage").val($("#count").val());
        if ($("#nowPage").val() == $("#count").val()) {
            alert("已经是最后一页了")
        }
        $("#nowPage").val($("#count").val());
        show();
    }

    function show() {
        $.post("findBooks.action", {pageNumber: pageNumber, pageSize: pageSize}, function (map) {
            var list = map.rows;
            var page = map.page;
            $("#tab tbody").empty();
            $.each(list, function (index, book) {
                var tr = $("<tr>");
                tr.append($("<td>" + book.id + "</td>"))
                    .append($("<td>" + book.name + "</td>"))
                    .append($("<td>" + book.price + "</td>"))
                    .append($("<td>" + book.author + "</td>"))
                    .append($("<td width='90px'><img src='images/" + book.cover + "' width=\"85px\" height=\"100px\"/></td>"))
                ;
                $("#tab tbody").append(tr);
            });

        }, "json");

    }
</script>
</body>
</html>

完整的代码已经上传至github,写的不好，欢迎指教。

SSM实现简单的分页
我理解的分页有三种方式：第一种：前台选择相对应的操作（如首页、下一页等），点击的同时传递参数到后台，后台通过接受的...
SSM整合+简单的增删改查
SSM整合+简单的增删改查分页查询还没做，但是用到的findAll是分页查询的，...
SSM框架——实现分页和搜索分页
分页是Java Web项目常用的功能，昨天在Spring MVC中实现了简单的分页操作和搜索分页，在此记录一下。使...
简单分页实现
传值： pages（总页数）和currentpage（当前页）分页代码：（freemarke）引用处：控制层...
小白浅谈SSM框架的整合思路&功能实现
来源：浅谈SSM框架的整合思路&功能实现这是我第一篇博客，关于SSM框架的整合思路以及简单功能实现。首先，最近...
Elasticsearch from+size 分页
from+size 实现分页 "浅"分页可以理解为简单意义上的分页。它的原理很简单，就是查询前20条数据，然后截断...
PHP与mysql的分页功能
今天想实现博客内容的分页，想通过源代码来实现简单的分页，在网上搜索了相关原理，了解到一些内容，大致如下： 1.分页...
RecyclerView的刷新分页
在开发中常常使用到刷新分页，这里实现一个 RecyclerView 的简单的刷新分页操作，测试效果见文末，实现过程...
Pagehelper分页插件的使用
概述： Pagehelper：是中国的开源的mybatis分页插件,通过该插件可以非常简单的实现分页功能； ...
2018-04-10 SSM框架PageHelper分页
SSM分页：https://blog.csdn.net/peng_hong_fu/article/details/...