jQuery分頁查詢組件

本文主要介紹jQuery實現PC端分頁查詢，如需適用原生JS可以直接修改。解決網上提供的分頁組件功能不完善問題。

一、需求

分頁組件兼容IE8及以上，可實現上一頁、下一頁、當前頁高亮、頁面直接跳轉、當前頁前後2頁顯示、第一頁和最後一頁顯示，媒體查詢等。

二、百聞不如一見

三、代碼

3.1peger.js

(function () {
    window.pager = {
        initPager: function (pageConfig) {
            var total = pageConfig.total || 1,  // 總數量
                pageNum = pageConfig.pageNum || 5,  // 每頁數量
                pageNo = pageConfig.pageNo || 1,  // 當前頁碼
                pageSize = Math.ceil(total / pageNum), // 總頁數;
                cb = pageConfig.cb; // 回調函數
            if (pageNo > pageSize) {
                pageNo = pageSize;
            }
            var $page = $("#page");
            var wrap, box = "", li, prev = "", next = "", input = "";
            $page.html("");
            wrap = document.createElement("div");
            prev = '<span class="pager-prev">上一頁</span>'
            li = '';
            for (var i = 1; i <= pageSize; i++) {
                if (i == pageNo) {
                    li += '<span class="pager-curr"><em class="pager-em"></em><em>' + i + '</em></span>';
                } else if (pageNo < 5 && i < 6) {
                    li += '<span class="pager-discurr">' + i + '</span>';
                } else if (pageSize < 7 || i == 1 || i == pageSize || (pageNo - 2 <= i && i <= pageNo + 2) || (pageNo > pageSize - 4 && i > pageSize - 5)) {
                    li += '<span class="pager-discurr">' + i + '</span>';
                } else {
                    if ((pageNo < 5 && i == 6) || (pageNo == 4 && i == 7) || (pageNo > 4 && i == pageNo - 3) || (pageNo > 4 && i == pageNo + 3) || (pageNo > pageSize - 5 && i > pageSize - 6)) {
                        li += '<span class="pager-spr">…</span>'
                    }
                }
            }
            next = '<span class="pager-next">下一頁</span>';
            input = '<div class="pager-input"><span class="input-tip">共' + pageSize + '頁，到第</span><input class="input-item pagerInput" type="num"/><span class="input-tip">頁</span><span class="pager-btn-go">確定</span></div>'
            box = '<div class="pager-box">' + prev + li + next + input + '<div>';

            wrap.innerHTML = box;
            $page[0].appendChild(wrap);

            window.pager.initBtn(pageNo, pageSize);

            var $discurr = $('.pager-discurr'),
                $pagerPrev = $('.pager-prev'),
                $pagerNext = $('.pager-next'),
                $pagerInput = $('.pagerInput'),
                $pagerGo = $('.pager-btn-go');

            $discurr.click(function () {
                var index = $discurr.index(this);
                pageNo = parseInt($discurr.eq(index).html());
                window.pager.jump({
                    total: total,
                    pageNum: pageNum,
                    pageNo: pageNo,
                    cb: cb
                })
            })
            $pagerPrev.click(function () {
                if (pageNo == 1) {
                    return;
                } else {
                    window.pager.jump({
                        total: total,
                        pageNum: pageNum,
                        pageNo: pageNo - 1,
                        cb: cb
                    })
                }
            })

            $pagerNext.click(function () {
                if (pageNo == pageSize) {
                    return;
                } else {
                    window.pager.jump({
                        total: total,
                        pageNum: pageNum,
                        pageNo: pageNo + 1,
                        cb: cb
                    })
                }
            })

            $pagerGo.click(function () {
                if ($pagerInput.val() == "") {
                    return;
                } else if (/^\d*$/.test(parseInt($pagerInput.val()))) {
                    pageNo = parseInt($pagerInput.val())
                    window.pager.jump({
                        total: total,
                        pageNum: pageNum,
                        pageNo: pageNo,
                        cb: cb
                    })
                } else {
                    $pagerInput.val("");
                    return;
                }
            })
            if (cb) {
                cb(pageNo)
            }
        },
        initBtn: function (pageNo, pageSize) { // 按鈕初始化
            var $pagerPrev = $('.pager-prev'),
                $pagerNext = $('.pager-next');
            if (pageNo == 1) {
                $pagerPrev.addClass("pager-disabled")
            } else {
                $pagerPrev.removeClass("pager-disabled")
            }
            if (pageNo == pageSize) {
                $pagerNext.addClass("pager-disabled")
            } else {
                $pagerNext.removeClass("pager-disabled")
            }
        },
        jump: function (pageConfig) {
            window.pager.initPager(pageConfig)
        }
    }
})(jQuery);//(jQuery)代表jQuery執行完畢後

3.2.1pager.less

.pager-wrapper {
    // display: flex;
    // display: table;
    text-align: center;

    .pager-box {
        display: inline-block;
        text-align: center;
        line-height: 28px;

        .pager-prev,
        .pager-next {
            width: 60px;
            height: 28px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(229, 229, 229, 1);
            display: inline-block;
            margin-right: 9px;
            margin-bottom: 5px;
            cursor: pointer;

            &.pager-disabled {
                color: #999;
                cursor: no-drop;
            }
        }

        .pager-curr {
            width: 40px;
            // width: 28px;
            height: 28px;
            background: rgba(216, 30, 33, 1);
            border: 1px solid rgba(229, 229, 229, 1);
            display: inline-block;
            color: #fff;
            margin-right: 9px;
            cursor: pointer;
        }

        .pager-discurr {
            width: 40px;
            // width: 28px;
            height: 28px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(229, 229, 229, 1);
            display: inline-block;
            margin-right: 9px;
            cursor: pointer;
        }

        .pager-spr {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            margin-right: 9px;
        }
    }

    .pager-input {
        display: inline-block;
        align-items: center;
        justify-content: center;

        .input-tip {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 14px;
            display: inline-block;
        }

        .input-item {
            width: 40px;
            // width: 28px;
            height: 28px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(229, 229, 229, 1);
            margin: 0 8px;
            text-align: center;
            display: inline-block;
        }

        .pager-btn-go {
            width: 60px;
            height: 28px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(229, 229, 229, 1);
            display: inline-block;
            align-items: center;
            justify-content: center;
            margin-left: 20px;
            cursor: pointer;

            &.pager-disabled {
                color: #999;
                cursor: no-drop;
            }
        }
    }
}

@media (max-width:1280px) { // 此處媒體查詢層級根據實際情況調整
    .main-content {
        .main-left {
            .pager-wrapper {
                .pager-curr {
                    width: 28px;
                }

                .pager-discurr {
                    width: 28px;
                }

                .input-item {
                    width: 28px;
                }

                .pager-spr,
                .pager-discurr,
                .pager-curr,
                .pager-prev,
                .pager-next {
                    margin-right: 4px;
                }

                .pager-btn-go {
                    margin-left: 15px;
                }
            }
        }
    }

}

3.2.2 pager.css （照顧部分沒有使用過less的小夥伴，等價於3.2.1）

.pager-wrapper {
  text-align: center;
}
.pager-wrapper .pager-box {
  display: inline-block;
  text-align: center;
  line-height: 28px;
}
.pager-wrapper .pager-box .pager-prev,
.pager-wrapper .pager-box .pager-next {
  width: 60px;
  height: 28px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  display: inline-block;
  margin-right: 9px;
  margin-bottom: 5px;
  cursor: pointer;
}
.pager-wrapper .pager-box .pager-prev.pager-disabled,
.pager-wrapper .pager-box .pager-next.pager-disabled {
  color: #999;
  cursor: no-drop;
}
.pager-wrapper .pager-box .pager-curr {
  width: 40px;
  height: 28px;
  background: #d81e21;
  border: 1px solid #e5e5e5;
  display: inline-block;
  color: #fff;
  margin-right: 9px;
  cursor: pointer;
}
.pager-wrapper .pager-box .pager-discurr {
  width: 40px;
  height: 28px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  display: inline-block;
  margin-right: 9px;
  cursor: pointer;
}
.pager-wrapper .pager-box .pager-spr {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-right: 9px;
}
.pager-wrapper .pager-input {
  display: inline-block;
  align-items: center;
  justify-content: center;
}
.pager-wrapper .pager-input .input-tip {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 14px;
  display: inline-block;
}
.pager-wrapper .pager-input .input-item {
  width: 40px;
  height: 28px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  margin: 0 8px;
  text-align: center;
  display: inline-block;
}
.pager-wrapper .pager-input .pager-btn-go {
  width: 60px;
  height: 28px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  display: inline-block;
  align-items: center;
  justify-content: center;
  margin-left: 20px;
  cursor: pointer;
}
.pager-wrapper .pager-input .pager-btn-go.pager-disabled {
  color: #999;
  cursor: no-drop;
}
@media (max-width: 1280px) {
  .main-content .main-left .pager-wrapper .pager-curr {
    width: 28px;
  }
  .main-content .main-left .pager-wrapper .pager-discurr {
    width: 28px;
  }
  .main-content .main-left .pager-wrapper .input-item {
    width: 28px;
  }
  .main-content .main-left .pager-wrapper .pager-spr,
  .main-content .main-left .pager-wrapper .pager-discurr,
  .main-content .main-left .pager-wrapper .pager-curr,
  .main-content .main-left .pager-wrapper .pager-prev,
  .main-content .main-left .pager-wrapper .pager-next {
    margin-right: 4px;
  }
  .main-content .main-left .pager-wrapper .pager-btn-go {
    margin-left: 15px;
  }
}

3.3調用方法

js模塊調用

var pageConfig = { 
    total: resData.totalNum,
    pageNum: size,
    pageNo: cp,
    cb: pageselectCallback
}
window.pager.initPager(pageConfig); // 初始化配置。其中window是爲了兼容ie8，如果不需要可以直接省略

function pageselectCallback(pageNo) { // 回調函數
     cp = pageNo;
     initData(); // 分頁查詢接口
     return false;
 }

html引入相關組件

<link href="./css/common/pager.css" type="text/css" rel="stylesheet" />
<script src="./js/lib/respond.js"></script> // 兼容ie8以下媒體查詢

<body>
	<div id="page" class="pager-wrapper"></div>
</body>

<script src="./js/lib/jquery.min.js"></script> // 可以是本地jquery 也可以是線上版本
<script src="./js/lib/pager.js"></script>

四、一分耕耘，一分收穫

jQuery分頁查詢組件

一、需求

二、百聞不如一見

三、代碼

3.1peger.js

3.2.1pager.less

3.2.2 pager.css （照顧部分沒有使用過less的小夥伴，等價於3.2.1）

3.3調用方法

記一次 .NET某工業設計軟件崩潰分析

創建 Vue3 項目

TS + Webpack 整合 Jest

分享5款.NET開源免費的Redis客戶端組件庫

安卓手機如何登錄抖音境外版

golang開發 gorilla websocket的使用

面試官：如果不允許線程池丟棄任務，應該選擇哪個拒絕策略？

嵌入式汽車電子學習路線

Mac卸載 Node npm，升級 Node

uni.showModel內容換行

微信web開發——微信登錄

echarts 解析

nodejs開通https的接口訪問

H5移動端原生JS封裝附件上傳服務器

Ajax請求只返回一次結果

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結