https://www.bcia.com.cn/static/js/myPagination.js

1function Page(_ref) {
2    var pageSize = _ref.pageSize,
3        pageTotal = _ref.pageTotal,
4        curPage = _ref.curPage,
5        id = _ref.id,
6        getPage = _ref.getPage,
7        showPageTotalFlag = _ref.showPageTotalFlag,
8        showSkipInputFlag = _ref.showSkipInputFlag,
9        pageAmount = _ref.pageAmount,
10        dataTotal = _ref.dataTotal;
11    if(!pageSize){
12        pageSize = 0
13    };
14    if(!pageSize){
15        pageSize = 0
16    };
17    if(!pageTotal){
18        pageTotal = 0
19    };
20    if(!pageAmount){
21        pageAmount = 0
22    };
23    if(!dataTotal){
24        dataTotal = 0
25    };
26    this.pageSize = pageSize || 5; //分页个数
27    this.pageTotal = pageTotal; //总共多少页
28    this.pageAmount = pageAmount; //每页多少条
29    this.dataTotal = dataTotal; //总共多少数据
30    this.curPage = curPage || 1; //初始页码
31    this.ul = document.createElement('ul');
32    this.id = id;
33    this.getPage = getPage;
34    this.showPageTotalFlag = showPageTotalFlag || false; //是否显示数据统计
35    this.showSkipInputFlag = showSkipInputFlag || false; //是否支持跳转
36    if(dataTotal >0 &&pageTotal>0){
37        this.init();
38    }else{
39        console.error("总页数或者总数据参数不对")
40    }
41};
42
43// 给实例对象添加公共属性和方法
44Page.prototype = {
45    init: function init() {
46        var pagination = document.getElementById(this.id);
47        pagination.innerHTML = '';
48        this.ul.innerHTML = '';
49        pagination.appendChild(this.ul);
50        var that = this;
51        //首页
52        that.firstPage();
53        //上一页
54        that.lastPage();
55        //分页

56        that.getPages().forEach(function (item) {
57            var li = document.createElement('li');
58            if (item == that.curPage) {
59                li.className = 'active';
60            } else {
61                li.onclick = function () {
62                    that.curPage = parseInt(this.innerHTML);
63                    that.init();
64                    that.getPage(that.curPage);
65                };
66            }
67            li.innerHTML = item;
68            that.ul.appendChild(li);
69        });
70        //下一页
71        that.nextPage();
72        //尾页
73        that.finalPage();
74
75        //是否支持跳转
76        if (that.showSkipInputFlag) {
77            that.showSkipInput();
78        }
79        //是否显示总页数,每页个数,数据
80        if (that.showPageTotalFlag) {
81            that.showPageTotal();
82        }
83    },
84    //首页
85    firstPage: function firstPage() {
86        var that = this;
87        var li = document.createElement('li');
88        li.innerHTML = '首页';
89        this.ul.appendChild(li);
90        li.onclick = function () {
91            var val = parseInt(1);
92            that.curPage = val;
93            that.getPage(that.curPage);
94            that.init();
95        };
96    },
97    //上一页
98    lastPage: function lastPage() {
99        var that = this;
100        var li = document.createElement('li');
101        li.innerHTML = '<';
102        if (parseInt(that.curPage) > 1) {
103            li.onclick = function () {
104                that.curPage = parseInt(that.curPage) - 1;
105                that.init();
106                that.getPage(that.curPage);
107            };
108        } else {
109            li.className = 'disabled';
110        }
111        this.ul.appendChild(li);
112    },
113    //分页
114    getPages: function getPages() {
115        var pag = [];
116        if (this.curPage <= this.pageTotal) {
117            if (this.curPage < this.pageSize) {
118                //当前页数小于显示条数
119                var i = Math.min(this.pageSize, this.pageTotal);
120                while (i) {
121                    pag.unshift(i--);
122                }
123            } else {
124                //当前页数大于显示条数
125                var middle = this.curPage - Math.floor(this.pageSize / 2),
126                    //从哪里开始
127                    i = this.pageSize;
128                if (middle > this.pageTotal - this.pageSize) {
129                    middle = this.pageTotal - this.pageSize + 1;
130                }
131                while (i--) {
132                    pag.push(middle++);
133                }
134            }
135        } else {
136            console.error('当前页数不能大于总页数');
137        }
138        if (!this.pageSize) {
139            console.error('显示页数不能为空或者0');
140        }
141        return pag;
142    },
143    //下一页
144    nextPage: function nextPage() {
145        var that = this;
146        var li = document.createElement('li');
147        li.innerHTML = '>';
148        if (parseInt(that.curPage) < parseInt(that.pageTotal)) {
149            li.onclick = function () {
150                that.curPage = parseInt(that.curPage) + 1;
151                that.init();
152                that.getPage(that.curPage);
153            };
154        } else {
155            li.className = 'disabled';
156        }
157        this.ul.appendChild(li);
158    },
159    //尾页
160    finalPage: function finalPage() {
161        var that = this;
162        var li = document.createElement('li');
163        li.innerHTML = '尾页';
164        this.ul.appendChild(li);
165        li.onclick = function () {
166            var yyfinalPage = that.pageTotal;
167            var val = parseInt(yyfinalPage);
168            that.curPage = val;
169            that.getPage(that.curPage);
170            that.init();
171        };
172    },
173    //是否支持跳转
174    showSkipInput: function showSkipInput() {
175        var that = this;
176        var li = document.createElement('li');
177        li.className = 'totalPage';
178        var span1 = document.createElement('span');
179        span1.innerHTML = '跳转到';
180        li.appendChild(span1);
181        var input = document.createElement('input');
182        input.setAttribute("type","number");
183        input.onkeydown = function (e) {
184            var oEvent = e || event;
185            if (oEvent.keyCode == '13') {
186                var val = parseInt(oEvent.target.value);
187                if (typeof val === 'number' && val <= that.pageTotal && val>0) {
188                    that.curPage = val;
189                    that.getPage(that.curPage);
190                }else{
191                    alert("请输入正确的页数 !")
192                }
193                that.init();
194            }
195        };
196        li.appendChild(input);
197        var span2 = document.createElement('span');
198        span2.innerHTML = '页';
199        li.appendChild(span2);
200        this.ul.appendChild(li);
201    },
202    //是否显示总页数,每页个数,数据
203    showPageTotal: function showPageTotal() {
204        var that = this;
205        var li = document.createElement('li');
206        li.innerHTML = '共&nbsp' + that.pageTotal + '&nbsp页';
207        li.className = 'totalPage';
208        this.ul.appendChild(li);
209        var li2 = document.createElement('li');
210        li2.innerHTML = '每页&nbsp' + that.pageAmount + '&nbsp条';
211        li2.className = 'totalPage';
212        this.ul.appendChild(li2);
213        var li3 = document.createElement('li');
214        li3.innerHTML = '合计&nbsp' + that.dataTotal + '&nbsp条数据';
215        li3.className = 'totalPage';
216        this.ul.appendChild(li3);
217    }
218};