Mybatis的PageHelper分頁插件的PageInfo的屬性參數，成員變量的解釋,以及頁面模板

做者: 程序猿的月光寶盒

---

//當前頁
private int pageNum;
//每頁的數量
private int pageSize;
//當前頁的數量
private int size;
//總頁數
private int pages;
//第一頁
private int firstPage;
//上一頁
private int prePage;
//下一頁
private int nextPage;
//總記錄數
private long total;

//因爲startRow和endRow不經常使用，這裏說個具體的用法
//能夠在頁面中"顯示startRow到endRow 共size條數據"
//當前頁面第一個元素在數據庫中的行號
private int startRow;
//當前頁面最後一個元素在數據庫中的行號
private int endRow;

//結果集
private List<T> list;
 
//是否爲第一頁
private boolean isFirstPage = false;
//是否爲最後一頁
private boolean isLastPage = false;
//是否有前一頁
private boolean hasPreviousPage = false;
//是否有下一頁
private boolean hasNextPage = false;
//導航頁碼數
private int navigatePages;
//全部導航頁號
private int[] navigatepageNums;
//導航條上的第一頁
private int navigateFirstPage;
//導航條上的最後一頁
private int navigateLastPage;

項目中使用了Mybatis的PageHelper分頁插件後的js文件

/**
 * 初始化首頁數據
 */
function initData(pageNo) {
    //清空原來的數據,找到第一個之外的tr,並移除,用 :gt()
    $("tr:gt(0)").remove();
    $.ajax({
        url: "showInvi.do",
        type: "post",
        dataType: "json",
        data: {"pageNo": pageNo},
        async: true,
        success: function (obj) {
            console.log(obj);
            if (obj.size === 0) {//若是沒有數據
                var str = `
                    <tr>
                        <td colspan="5">沒有符合條件的數據</td>
                    </tr>
                `;
                $("#dataTble").append(str);
                $("p").html("");
            } else {
                $.each(obj.list, function (i) {
                    var str = `
            <tr>
                <td>${obj.list[i].title}</td>
                <td>${obj.list[i].summary}</td>
                <td>${obj.list[i].author}</td>
                <td>${obj.list[i].createdate}</td>
                <td>
                    <a href="/showReply.html?invid=${obj.list[i].id}">查看回復</a>||<a href="javascript:void(0);" onclick="del(${obj.list[i].id},'${obj.list[i].title}');">刪除</a>
                </td>
            </tr>          
                `;
                    $("#dataTble").append(str);
                });
                $("tr:gt(0):odd").attr("style", "background-color:#90EE90");
                //分頁,我是放在一個p標籤裏
                var pageFoot = $("p");

                //在分頁前,清空原來分頁的內容
                pageFoot.html("");
                var pageStr = "";
                if (obj.total === 0) {//若是沒有數據,就不顯示分頁條
                    return;
                }
                if (obj.isFirstPage && obj.hasNextPage) {//若是是第一頁,而且還有下一頁
                    pageStr = `
                <a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">首&nbsp;頁</a>|
                <a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;"><< 上一頁</a>|
                <a href="javascript:void(0);" onclick="initData(${obj.nextPage});">下一頁>></a>|
                <a href="javascript:void(0);" onclick="initData(${obj.pages});">尾&nbsp;頁</a>
                `
                } else if (obj.isFirstPage && !obj.hasNextPage) {//若是是第一頁,而且沒有下一頁
                    pageStr = ``//nothing to do
                } else if (!obj.isFirstPage && obj.hasNextPage) {//若是不是第一頁,而且還有下一頁
                    pageStr = `
                <a href="javascript:void(0);" onclick="initData(1)">首&nbsp;頁</a>|
                <a href="javascript:void(0);" onclick="initData(${obj.prePage});"><< 上一頁</a>|
                <a href="javascript:void(0);" onclick="initData(${obj.nextPage});">下一頁>></a>|
                <a href="javascript:void(0);" onclick="initData(${obj.pages});">尾&nbsp;頁</a>
                `
                } else if (!obj.isFirstPage && !obj.hasNextPage) {//若是不是第一頁,且沒有下一頁
                    pageStr = `
                <a href="javascript:void(0);" onclick="initData(${obj.firstPage});">首&nbsp;頁</a>|
                <a href="javascript:void(0);" onclick="initData(${obj.prePage});"><< 上一頁</a>|
                <a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">下一頁>></a>|
                <a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">尾&nbsp;頁</a>
                `
                }
                pageStr += `
            第&nbsp;
                ${obj.pageNum}
                頁/共
                ${obj.pages}
                頁(${obj.total}條)
            `;
                pageFoot.append(pageStr);
            }
        }, error: function () {
            alert("initData error");
        }
    })
}

基本上分頁部分能夠做爲模板

他對應的html

---

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<center>
    <h1>帖子列表</h1>
    <hr/>
    <form id="findInvis">
        帖子標題:
        <input title="請輸入帖子標題" name="title">
        <!--input的類型仍是submit-->
        <input type="submit" value="搜索" >
    </form>
    <div id="infos">
        <br/>
        <table border="1" style="width: 100%;text-align: center" id="dataTble">
            <tr style="background-color: #6FABC1;">
                <td>標題</td>
                <td>內容摘要</td>
                <td>做者</td>
                <td>發佈時間</td>
                <td>操做</td>
            </tr>
        </table>
        <p></p>
    </div>
</center>
<script rel="script" type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script rel="script" type="text/javascript" src="js/list.js"></script>
</body>
</html>

---

對應的ServiceImpl

@Override
    public PageInfo<Map<String, Object>> selectByPrimaryKey(Integer invid,Integer pageNo) {
        PageHelper.startPage(pageNo,4);
        List<Map<String, Object>> maps = replyDetailMapper.selectByPrimaryKey(invid);
        return new PageInfo<> (maps);
    }

對應的Controller,是標註@RestController的

@RequestMapping("/showInvi.do")
    public PageInfo<Map<String, Object>> selectByTitle(Invitation invitation,Integer pageNo) {
        return invitationService.selectByTitle(invitation,pageNo);
    }