123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200 |
- function myPagination(_ref) {
- var pageSize = _ref.pageSize,
- pageTotal = _ref.pageTotal,
- curPage = _ref.curPage,
- id = _ref.id,
- getPage = _ref.getPage,
- showPageTotalFlag = _ref.showPageTotalFlag,
- showSkipInputFlag = _ref.showSkipInputFlag,
- pageAmount = _ref.pageAmount,
- dataTotal = _ref.dataTotal;
- this.pageSize = pageSize || 3; //分页个数
- this.pageTotal = pageTotal || 0; //总共多少页
- this.pageAmount = pageAmount || 13; //每页多少条
- this.dataTotal = dataTotal || 0; //总共多少数据
- this.curPage = curPage || 1; //初始页码
- this.ul = document.createElement('ul');
- this.id = id;
- this.getPage = getPage;
- this.showPageTotalFlag = showPageTotalFlag || false; //是否显示数据统计
- this.showSkipInputFlag = showSkipInputFlag || false; //是否支持跳转
- this.init();
- };
- // 给实例对象添加公共属性和方法
- myPagination.prototype = {
- init: function init() {
- var pagination = document.getElementById(this.id);
- pagination.innerHTML = '';
- this.ul.innerHTML = '';
- pagination.appendChild(this.ul);
- var that = this;
- //首页
- that.firstPage();
- //上一页
- that.lastPage();
- //分页
- that.getPages().forEach(function (item) {
- var li = document.createElement('li');
- if (item == that.curPage) {
- li.className = 'active';
- } else {
- li.onclick = function () {
- that.curPage = parseInt(this.innerHTML);
- that.init();
- that.getPage(that.curPage);
- };
- }
- li.innerHTML = item;
- that.ul.appendChild(li);
- });
- //下一页
- that.nextPage();
- //尾页
- that.finalPage();
- //是否支持跳转
- if (that.showSkipInputFlag) {
- that.showSkipInput();
- }
- //是否显示总页数,每页个数,数据
- if (that.showPageTotalFlag) {
- that.showPageTotal();
- }
- },
- //首页
- firstPage: function firstPage() {
- var that = this;
- var li = document.createElement('li');
- li.innerHTML = '首页';
- this.ul.appendChild(li);
- li.onclick = function () {
- var val = parseInt(1);
- that.curPage = val;
- that.getPage(that.curPage);
- that.init();
- };
- },
- //上一页
- lastPage: function lastPage() {
- var that = this;
- var li = document.createElement('li');
- li.innerHTML = '<';
- if (parseInt(that.curPage) > 1) {
- li.onclick = function () {
- that.curPage = parseInt(that.curPage) - 1;
- that.init();
- that.getPage(that.curPage);
- };
- } else {
- li.className = 'disabled';
- }
- this.ul.appendChild(li);
- },
- //分页
- getPages: function getPages() {
- var pag = [];
- if (this.curPage <= this.pageTotal) {
- if (this.curPage < this.pageSize) {
- //当前页数小于显示条数
- var i = Math.min(this.pageSize, this.pageTotal);
- while (i) {
- pag.unshift(i--);
- }
- } else {
- //当前页数大于显示条数
- var middle = this.curPage - Math.floor(this.pageSize / 2),
- //从哪里开始
- i = this.pageSize;
- if (middle > this.pageTotal - this.pageSize) {
- middle = this.pageTotal - this.pageSize + 1;
- }
- while (i--) {
- pag.push(middle++);
- }
- }
- } else {
- console.error('当前页数不能大于总页数');
- }
- if (!this.pageSize) {
- console.error('显示页数不能为空或者0');
- }
- return pag;
- },
- //下一页
- nextPage: function nextPage() {
- var that = this;
- var li = document.createElement('li');
- li.innerHTML = '>';
- if (parseInt(that.curPage) < parseInt(that.pageTotal)) {
- li.onclick = function () {
- that.curPage = parseInt(that.curPage) + 1;
- that.init();
- that.getPage(that.curPage);
- };
- } else {
- li.className = 'disabled';
- }
- this.ul.appendChild(li);
- },
- //尾页
- finalPage: function finalPage() {
- var that = this;
- var li = document.createElement('li');
- li.innerHTML = '尾页';
- this.ul.appendChild(li);
- li.onclick = function () {
- var yyfinalPage = that.pageTotal;
- var val = parseInt(yyfinalPage);
- that.curPage = val;
- that.getPage(that.curPage);
- that.init();
- };
- },
- //是否支持跳转
- showSkipInput: function showSkipInput() {
- var that = this;
- var li = document.createElement('li');
- li.className = 'totalPage';
- var span1 = document.createElement('span');
- span1.innerHTML = '跳转到';
- li.appendChild(span1);
- var input = document.createElement('input');
- input.setAttribute("type","number");
- input.onkeydown = function (e) {
- var oEvent = e || event;
- if (oEvent.keyCode == '13') {
- var val = parseInt(oEvent.target.value);
- if (typeof val === 'number' && val <= that.pageTotal) {
- that.curPage = val;
- that.getPage(that.curPage);
- }else{
- alert("跳转页数不能大于总页数 !")
- }
- that.init();
- }
- };
- li.appendChild(input);
- var span2 = document.createElement('span');
- span2.innerHTML = '页';
- li.appendChild(span2);
- this.ul.appendChild(li);
- },
- //是否显示总页数,每页个数,数据
- showPageTotal: function showPageTotal() {
- var that = this;
- var li = document.createElement('li');
- li.innerHTML = '共 ' + that.pageTotal + ' 页';
- li.className = 'totalPage';
- this.ul.appendChild(li);
- var li2 = document.createElement('li');
- li2.innerHTML = '每页 ' + that.pageAmount + ' 条';
- li2.className = 'totalPage';
- this.ul.appendChild(li2);
- var li3 = document.createElement('li');
- li3.innerHTML = '合计 ' + that.dataTotal + ' 条数据';
- li3.className = 'totalPage';
- this.ul.appendChild(li3);
- }
- };
|