原生js分页组件

1

1
2
3
4
5
/**
 * Created by chenru on 2018/5/8.
 */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var pageNation;
pageNation = (function () {
    function extend(target, source) {
        for (var obj in source) {
            target[obj] = source[obj];
        }
        return target;
    }
    function pageNation(options) {
        var defaultOptions = {
            el: "body",//分页父容器  
            page: 1,
            size: 10,
            total: 0,
            styUrl: 'style.css',
            callback: null,
            IsShowBtn: {//设置需要显示的按钮
                choosePageSize: true,//是否显示下拉选项
                IsShowPrevOrNextBtn: true,//否显示上一页下一页按钮
                IsShowEnterBtn: true,//是否显示跳转输入
                IsShowTotalPage:true,//是否显示总页数
            }
        };
        this.options = extend(defaultOptions, options) || {};
        this.options.el = document.querySelectorAll(this.options.el)[0];
        this.pageT = Math.ceil(this.options.total / this.options.size);
        this.init();
        if (!document.querySelector("#dynamic-style")) {
            this.pageStyle();
        }
        //this.options.callback(1,self.options.size,self.options.total);  
    }

    var proto = pageNation.prototype || {};
    proto.rander = function (page, size, total) {
        this.options.page = !!page ? page : 1;
        this.options.size = !!size ? size : 10;
        this.options.total = !!total ? total : 0;//  
        this.pageT = Math.ceil(this.options.total / this.options.size);
        this.init();
        this.page_nation = null;
    };
    proto.init = function () {
        var self = this;
        var pageNum = function (page) {//创建分页器  
            return (function () {
                let ol = document.createElement("ol");
                ol.classList.add("page-ol");
                let p = !!page ? page : 1;
                let tPage = Math.ceil(self.options.total / self.options.size);
                let s = p <= 3 ? 1 : p > (tPage - 3) ? tPage - 4 : p - 2;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
        s=s==0?1:s;
                for (let i = s; i < (s + 5); i++) {
                    if (i > tPage) {
                        break;
                    }
                    let li = document.createElement("li");
                    li.innerText = i;
                    if (i == p) {
                        li.classList.add("hover");
                    }
                    ol.appendChild(li);
                }
                return ol;
            })(page);
        };
        var sizeNum = function (size) {//重置size  
            return (function () {
                let select = document.createElement("select");
                select.setAttribute("class", "page-Select");
                let s = !!size ? size : 10;
                //let tPage=Math.ceil(self.options.total/self.options.size);  
                for (let i = 5; i <= (5 * 4); i += 5) {
                    let option = document.createElement("option");
                    option.value = i;
                    option.innerText = i;
                    if (i === self.options.size) {
                        option.setAttribute("selected", "selected");
                    }
                    select.appendChild(option);
                }
                return select;
            })(size);
        };
        var prevBtn = function () {//上一页按钮  
            return (function () {
                let button = document.createElement("span");
                button.setAttribute("class", "prev-btn");
                button.innerText = "上一页";
                if (self.options.page == 1) {
                    button.classList.add("disabled")
                };
                return button;
            })();
        };
        var nextBtn = function () {//下一页按钮  
            return (function () {
                let button = document.createElement("span");
                button.setAttribute("class", "next-btn");
                button.innerText = "下一页";
                if (self.options.page == self.pageT) {
                    button.classList.add("disabled")
                }
                ;
                return button;
            })();
        };
        var pageMark = function () {//页码标识  
            return (function () {
                let span = document.createElement("span");
                span.setAttribute("class", "pageMark");
                span.innerHTML = "<strong>" + self.options.page + "</strong> / <strong>" + Math.ceil(self.options.total / self.options.size) + "</strong>";
                return span;
            })();
        };
        var enterBtn = function () {//跳转按钮  
            return (function () {
                let button = document.createElement("span");
                button.setAttribute("class", "enter-btn");
                let ipt = document.createElement("input");
                ipt.value = self.options.page;
                ipt.setAttribute("type", "text");

                let b = document.createElement("span");
                b.setAttribute("class", "enterBtn");
                b.innerText = "跳转";

                button.appendChild(ipt);
                button.appendChild(b);

                return button;
            })();
        };
        let page_nation = self.options.el.querySelector(".page-nation");
        if (page_nation != null && page_nation != "undefind") {
            page_nation.innerHTML = "";
        }
        else {
            page_nation = document.createElement("div");
            page_nation.classList.add("page-nation");
            self.options.el.appendChild(page_nation);
        }
        page_nation.appendChild(new pageNum(self.options.page));
        self.options.IsShowBtn.choosePageSize&&page_nation.appendChild(new sizeNum(self.options.size));
        self.options.IsShowBtn.IsShowPrevOrNextBtn&&page_nation.appendChild(new prevBtn());
        self.options.IsShowBtn.IsShowPrevOrNextBtn&&page_nation.appendChild(new nextBtn());
        page_nation.appendChild(new pageMark());
        self.options.IsShowBtn.IsShowEnterBtn&&page_nation.appendChild(new enterBtn());

        self.page_nation = document.querySelector(".page-nation");

        this.switchPage(self.options.callback);
        this.switchSize(self.options.callback);
        return self;
    };
    proto.pageStyle = function () {
        let headDoc = document.querySelector("head");
        var linkTag = document.createElement("link");
        var cssURL = this.options.styUrl;
        linkTag.id = 'dynamic-style';
        linkTag.href = cssURL;
        linkTag.setAttribute('rel', 'stylesheet');
        linkTag.setAttribute('media', 'all');
        linkTag.setAttribute('type', 'text/css');
        headDoc.appendChild(linkTag);
    };
    proto.switchPage = function (fun) {
        let self = this;
        let lis = this.page_nation.children[0].children;
        for (let i = 0, len = lis.length; i < len; i++) {
            lis[i].onclick = function () {
                self.options.page = this.innerText;
                self.rander(self.options.page, self.options.size, self.options.total);
            };
        }
        this.options.el.querySelectorAll(".prev-btn")[0].onclick = function (e) {
            //console.time("rr");  
            self.options.page = --self.options.page;
            self.rander(self.options.page, self.options.size, self.options.total);
            //console.timeEnd("rr");  
        };
        this.options.el.querySelectorAll(".next-btn")[0].onclick = function (e) {
            self.options.page = ++self.options.page;
            self.rander(self.options.page, self.options.size, self.options.total);
        };
        this.options.el.querySelectorAll(".enterBtn")[0].onclick = function (e) {
            let val = this.previousElementSibling.value;
            if (!val || val > self.pageT || val < 1) {
                alert("参数超出范围！");
                return false;
            } else {
                self.options.page = val;
                self.rander(self.options.page, self.options.size, self.options.total);
            }
        };
        fun(self.options.page, self.options.size, self.options.total);
    };
    proto.switchSize = function (fun) {
        let self = this;
        let lis = this.page_nation.children[1];
        lis.onchange = function () {
            self.options.size = Number(this.value);
            self.rander(1, self.options.size, self.options.total);
            fun(1, self.options.size, self.options.total);
        }
    };
    return pageNation;
})(); 

1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
ol.page-ol{
    display: inline-block;
    line-height: 2em;
    font-size: 1em;
}
ol.page-ol li{
    display: inline-block;
    line-height: 2em;
    font-size: 1em;
    padding:0 .6em;
    cursor:pointer;
    border: 1px solid #ddd;
    margin: 0 .5em;
}
ol.page-ol li:hover,ol.page-ol li.hover,.enter-btn span:hover,.prev-btn:hover,.next-btn:hover,.enter-btn span.hover,.prev-btn.hover,.next-btn.hover{
    background: dodgerblue;
    font-size: 1em;
    color:#fff;
}
.page-Select{
    display: inline-block;
    height: 2em;
    border:1px solid #ddd;
    font-size:1em;
}
.prev-btn,.next-btn{
    display: inline-block;
    line-height: 2em;
    font-size: 1em;
    padding: 0 .6em;
    cursor: pointer;
    border: 1px solid #ddd;
    margin: 0 .5em;
}
.next-btn{}
.pageMark{}
.enter-btn input,#enter-btn span{
    display: inline-block;
    line-height: 2em;
    font-size: 1em;
    padding: 0 .6em;
    cursor: pointer;
    border: 1px solid #ddd;
    /*//width:2em;*/
}
.enter-btn input{
    width:4em;
}
.page-nation {
    display: flow-root;
    text-align: center;
    margin: 2em 0;
}
.disabled{
    background: #C9C9C9!important;
    pointer-events: none;
    color: #fff !important;
}
div,ul,li,ol,table,td,th,span,strong,i,p{
    -moz-user-select:none;/*火狐*/
    -webkit-user-select:none;/*webkit浏览器*/
    -ms-user-select:none;/*IE10*/
    -khtml-user-select:none;/*早期浏览器*/
    user-select:none;
}

1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="page-nation"></div>
  <script src="script/page.js"></script>
  <script>  
    //分页调用方法  
    const Api=new pageNation({  
        el:"#page-nation",//分页器位置  
        page:1,//当前页  
        size:5,//默认5,10,15,20  
        total:100,//数据总条数  
        styUrl:'css/page.css',//样式地址（可修改）  
                IsShowBtn: {//设置需要显示的按钮
                    choosePageSize: true,//是否显示下拉选项
                    IsShowPrevOrNextBtn: true,//是否显示上一页下一页按钮
                    IsShowEnterBtn: true,//是否显示跳转输入
                    IsShowTotalPage:true,//是否显示总页数
                },
        callback:function(page,size,total){  
          console.log(page,size,total);  
          //此处为ajax请求  
  
        }  
    });    
</script>  
</body>
</html>