基于jQuery封裝的分頁(yè)組件（可自定義設(shè)置）

lmxdawn 發(fā)布于2019-08-29 16:29 / 1229人閱讀

摘要：封裝的分頁(yè)組件前幾天做了一個(gè)的組件分頁(yè)，而現(xiàn)在需求是的分頁(yè)，我就根據(jù)我自己的需求寫了一個(gè)。在網(wǎng)上找了很久的基于的分頁(yè)封裝，可是都不是我想要的結(jié)果，那么今天我就給大家看一下我的這個(gè)分頁(yè)。

jQuery封裝的分頁(yè)組件

前幾天做了一個(gè)vue的組件分頁(yè)，而現(xiàn)在需求是jquery的分頁(yè)，我就根據(jù)我自己的需求寫了一個(gè)。
在網(wǎng)上找了很久的基于jquery的分頁(yè)封裝，可是都不是我想要的結(jié)果，那么今天我就給大家看一下我的這個(gè)分頁(yè)。
你可以自行改變內(nèi)容代碼來(lái)達(dá)到你的目的，例如：樣式的問(wèn)題，你就可以自行調(diào)整css樣式。

1.看一下效果

2.下面就是具體介紹一下

（1）、首先是css樣式（可自行調(diào)節(jié)）當(dāng)然你頁(yè)可以外鏈一個(gè)css，最后會(huì)有整體的代碼展示！

     body,
        html {
            width: 100%;
            height: 100%;
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        
        .page {
            width: 100%;
            margin: 100px auto;
            height: 34px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pages {
            /*width: 80%;*/
            display: block;
            height: 34px;
            position: relative;
            text-align: center;
            overflow: hidden;
        }
        
        .all_data {
            color: #6699FF;
        }
        
        .all_pages {
            color: #6699FF;
        }
        
        .page_left {
            width: 200px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            text-align: center;
        }
        
        .page_footer {
            width: 180px;
            height: 35px;
            position: relative;
            margin-left: 24px;
        }
        
        .page_cont>div {
            display: block;
            position: relative;
            float: left;
            line-height: 32px;
            text-align: center;
        }
        
        .hometrailer {
            width: 64px;
            height: 32px;
            background: rgba(255, 255, 255, 1);
            border-radius: 3px;
            border: #E3E3E3 1px solid;
            cursor: pointer;
        }
        
        .updown {
            width: 84px;
            height: 32px;
            background: rgba(255, 255, 255, 1);
            border-radius: 3px;
            border: #E3E3E3 1px solid;
            cursor: pointer;
        }
        
        .page_view {
            height: 32px;
            position: relative;
        }
        
        .page_view ul {
            overflow: hidden;
        }
        
        .li {
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 1);
            border-radius: 3px;
            color: #666;
            float: left;
            list-style: none;
            margin-left: 8px;
            border: #E3E3E3 1px solid;
            cursor: pointer;
        }
        
        .active {
            background: rgba(96, 129, 255, 1)!important;
            color: #fff !important;
        }
        
        .pages>div {
            display: block;
            float: left;
            line-height: 32px;
            text-align: center;
        }
        
        .page_input {
            display: inline-block;
            width: 64px;
            height: 30px;
            background: rgba(255, 255, 255, 1);
            border-radius: 3px;
            border: #E3E3E3 1px solid;
            outline: none;
            font-size: 14px;
            text-align: center;
        }
        
        .page_btn {
            display: inline-block;
            width: 84px;
            height: 32px;
            background: rgba(96, 129, 255, 1);
            border-radius: 3px;
            color: #fff;
            line-height: 32px;
            text-align: center;
            font-size: 14px;
        }
        
        .page_home {
            margin-right: 8px;
        }
        
        .page_trailer {
            margin-left: 8px;
        }
        
        .page_down {
            margin-left: 8px;
            w
        }
        
        .page_down_two {
            margin-left: 8px;
        }

（2）、js代碼（你可以在中設(shè)置許多需求，例如：你不需要共有多少頁(yè)，那么就就可以直接在就是代碼中刪除）

 function Page(settings) {
   this.settings = settings;
   this.init();
}
//默認(rèn)配置
Page.prototype = {
    init: function() {
    this.create();
},
create: function() {
   var _template = `
    
        共 ${this.settings.count} 條信息/共 ${this.settings.countPage} 頁(yè)
        
         
            首頁(yè)
            上一頁(yè)
            
                
                
            
            下一頁(yè)
            尾頁(yè)
        
        
            
            頁(yè)
            跳轉(zhuǎn)
        
    `;
    $(this.settings.container).append(_template);
    this.refreshDom(this.settings);
    this.bindEvent();
    },
bindEvent: function() {
    var _this = this;
        //跳轉(zhuǎn)首頁(yè)
    $(this.settings.container).on("click", ".page_home", function() {
        var newpages = 1;
        _this.settings.nowPage = newpages;
        _this.settings.callBack(_this.settings.nowPage)
        _this.refreshDom(this.settings);
    });
    //跳轉(zhuǎn)上一頁(yè)
    $(this.settings.container).on("click", ".page_up", function() {
        var newpages = _this.settings.nowPage;
        newpages--;
        if(newpages < 1) {
            newpages = 1
            _this.settings.nowPage = newpages
        } else {
            _this.settings.nowPage = newpages
        }
    _this.settings.callBack(_this.settings.nowPage)
        _this.refreshDom(this.settings);
    });
    //跳轉(zhuǎn)下一頁(yè)
    $(this.settings.container).on("click", ".page_down", function() {
        var newpages = _this.settings.nowPage;
        newpages++;
        if(newpages > _this.settings.countPage) {
            newpages = _this.settings.countPage
            _this.settings.nowPage = newpages
        } else {
            _this.settings.nowPage = newpages
        }
        _this.settings.callBack(_this.settings.nowPage)
        _this.refreshDom(this.settings);
    });
    //跳轉(zhuǎn)末頁(yè)
    $(this.settings.container).on("click", ".page_trailer", function() {
        var newpages = _this.settings.countPage;
        _this.settings.nowPage = newpages;
        _this.settings.callBack(_this.settings.nowPage)
        _this.refreshDom(this.settings);
    });
    //Go跳轉(zhuǎn)
    $(this.settings.container).on("click", ".page_btn", function() {
        var inputText = $(".page_input").val() - 0;
        if(inputText < 1 || inputText > _this.settings.countPage) {
            alert("輸入的頁(yè)面不正確，請(qǐng)重新輸入")
        } else {
            _this.settings.nowPage = inputText;
            _this.settings.callBack(_this.settings.nowPage)
            _this.refreshDom(this.settings);
            //                establish(objpage);
            //外部的ajax
        }
        });
    },
    refreshDom: function() {
        var _this = this;
        $(".li").remove();
        var countPage = this.settings.countPage;
        var showPageCount = this.settings.showPageCount;
        var nowPage = this.settings.nowPage - 0;
        var count = this.settings.count;
        var bian = (showPageCount - 1) / 2;
        $(".all_data").html(count);
        $(".all_pages").html(countPage);
        var html = "";
        if(nowPage - bian <= 0) {
            for(var i = 1; i < showPageCount + 1; i++) {
                var index = i;
                if(nowPage == index) {
                pageHtml = `    ${i}`;
                } else {
                pageHtml = `    ${i}`;
                }
            html += pageHtml;
            }
        } else if(nowPage - bian > 0 && nowPage + bian < countPage) {
            var num = nowPage - bian;
            for(var i = num; i < (num + showPageCount); i++) {
                var index = i;
                if(nowPage == index) {
                    pageHtml = `    ${i}`;
                } else {
                    pageHtml = `    ${i}`;
                }
            html += pageHtml;
            }

        } else if(nowPage + bian >= countPage) {
            var numAll = countPage - showPageCount + 1;
            for(var i = numAll; i < (numAll + showPageCount); i++) {
                var index = i;
                if(nowPage == index) {
                    pageHtml = `    ${i}`;
                } else {
                    pageHtml = `    ${i}`;
                }
            html += pageHtml;
        }
    }

    $(".page_view_ul").append(html)

    $(".li").click(function() {
        _this.settings.nowPage = $(this).attr("index")-0;
            _this.settings.callBack(_this.settings.nowPage)
        _this.refreshDom(this.settings);
    })
    }
};
    var pageInit = function(opts) {
        return new Page(opts);
    };

    window.pageInit = $.pageInit = pageInit;

（3）、初始化js（具體參數(shù)有具體詳解，你可已根據(jù)你的需求添加新的參數(shù)）

（4）、html代碼（封裝好的js和css，直接來(lái)看吧！）

 
  

    
    
    分頁(yè)示例

最后，如有錯(cuò)誤，請(qǐng)大家即使提出，我會(huì)及時(shí)改正

本人才疏學(xué)淺，請(qǐng)大家多多包涵！

GPU云服務(wù)器云服務(wù)器可自定義大小 html的分頁(yè) jstl的分頁(yè) 存儲(chǔ)過(guò)程的分頁(yè)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/113774.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

lmxdawn

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Nextarray：SSD VPS低至$1.99/月，特價(jià)物理服務(wù)器：$29.95/月，OpenvZ

閱讀 1553·2021-11-19 09:55
測(cè)試2年，年薪50W，這讓開(kāi)發(fā)情何以堪！

閱讀 2778·2021-09-06 15:02
排名前10的vue前端UI框架框架值得你掌握

閱讀 3533·2019-08-30 15:53
前端每日實(shí)戰(zhàn)：125# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)失落的人獨(dú)自行走的動(dòng)畫

閱讀 1070·2019-08-29 16:36
基于jQuery封裝的分頁(yè)組件（可自定義設(shè)置）

閱讀 1230·2019-08-29 16:29
prop 和 attr 中一些羞羞的事情

閱讀 2285·2019-08-29 15:21
iKcamp出品微信小程序教學(xué)共5章16小節(jié)匯總(含視頻)

閱讀 620·2019-08-29 13:45
JS設(shè)計(jì)模式入門和框架中的實(shí)踐

閱讀 2679·2019-08-26 17:15

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

基于jQuery封裝的分頁(yè)組件（可自定義設(shè)置）

相關(guān)文章