CN\wuwx26
5 years ago
15 changed files with 440 additions and 37 deletions
@ -0,0 +1,132 @@ |
|||||
|
#luckysheet-bottom-pager { |
||||
|
margin-right: 10px; |
||||
|
float: right; |
||||
|
} |
||||
|
.spage-total { |
||||
|
display: inline-block; |
||||
|
margin-right: 10px; |
||||
|
line-height: 29px; |
||||
|
color: #666; |
||||
|
font-size: 14px |
||||
|
} |
||||
|
|
||||
|
.spage-number { |
||||
|
display: inline-block; |
||||
|
color: #666; |
||||
|
font-size: 14px |
||||
|
} |
||||
|
.selectNum { |
||||
|
font-size: 14px; |
||||
|
height: 27px; |
||||
|
box-sizing: border-box; |
||||
|
vertical-align: top; |
||||
|
line-height: 27px; |
||||
|
border: 1px solid #ddd; |
||||
|
margin-left: 5px; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.spage-number button { |
||||
|
position: relative; |
||||
|
box-sizing: border-box; |
||||
|
display: inline-block; |
||||
|
margin-left: -1px; |
||||
|
padding: 0 10px; |
||||
|
line-height: 27px; |
||||
|
border: 1px solid #ddd; |
||||
|
text-align: center; |
||||
|
transition: all .2s; |
||||
|
cursor: pointer; |
||||
|
outline: none; |
||||
|
background: 0 0; |
||||
|
user-select: none; |
||||
|
color: #333; |
||||
|
background: #fff; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.prevBtn, .nextBtn { |
||||
|
width: 16px; |
||||
|
height: 27px; |
||||
|
background: url(../images/js.png) no-repeat center center; |
||||
|
background-size: 100% auto; |
||||
|
display: block; |
||||
|
transform: rotate(180deg); |
||||
|
} |
||||
|
.nextBtn { |
||||
|
transform: rotate(0); |
||||
|
} |
||||
|
.spage-number button.active { |
||||
|
background: #2d98e6; |
||||
|
color: #fff; |
||||
|
border-color: #2d98e6; |
||||
|
z-index: 3 |
||||
|
} |
||||
|
|
||||
|
.spage-number button.active:hover { |
||||
|
background: #2d98e6; |
||||
|
color: #fff; |
||||
|
border-color: #2d98e6; |
||||
|
z-index: 3 |
||||
|
} |
||||
|
|
||||
|
.spage-number button:hover { |
||||
|
background-color: #eee |
||||
|
} |
||||
|
|
||||
|
.spage-number button.button-disabled { |
||||
|
cursor: not-allowed; |
||||
|
color: #ccc |
||||
|
} |
||||
|
|
||||
|
.spage-number .spage-after, |
||||
|
.spage-before { |
||||
|
padding: 0; |
||||
|
width: 40px |
||||
|
} |
||||
|
|
||||
|
.spage-skip { |
||||
|
display: inline-block; |
||||
|
margin-left: 5px; |
||||
|
line-height: 27px; |
||||
|
color: #666; |
||||
|
font-size: 14px |
||||
|
} |
||||
|
|
||||
|
.spage-skip input { |
||||
|
box-sizing: border-box; |
||||
|
display: inline-block; |
||||
|
width: 45px; |
||||
|
height: 29px; |
||||
|
text-align: center; |
||||
|
vertical-align: top; |
||||
|
border: 1px solid #ddd; |
||||
|
background: 0 0; |
||||
|
outline: none; |
||||
|
transition: all .2s |
||||
|
} |
||||
|
|
||||
|
.spage-skip input:focus { |
||||
|
border-color: #2d98e6 |
||||
|
} |
||||
|
|
||||
|
.spage-skip button { |
||||
|
display: inline-block; |
||||
|
padding: 0 14px; |
||||
|
line-height: 27px; |
||||
|
vertical-align: top; |
||||
|
color: #333; |
||||
|
border: 1px solid #ddd; |
||||
|
cursor: pointer; |
||||
|
transition: all .2s; |
||||
|
outline: none; |
||||
|
background: 0 0; |
||||
|
user-select: none; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
.spage-skip button:hover { |
||||
|
background: #2d98e6; |
||||
|
color: #fff; |
||||
|
border: 1px solid #2d98e6 |
||||
|
} |
||||
|
|
||||
|
|
||||
@ -0,0 +1,202 @@ |
|||||
|
/* jQuery分页插件sPage version:1.2.2 github:https://github.com/jvbei/sPage */ |
||||
|
(function (p, t, e, a) { |
||||
|
"use strict"; |
||||
|
var s = { |
||||
|
page: 1, |
||||
|
pageSize: 200, |
||||
|
total: 0, |
||||
|
showTotal: false, |
||||
|
totalTxt: "共{total}条", |
||||
|
noData: false, |
||||
|
showSkip: false, |
||||
|
showPN: true, |
||||
|
prevPage: "上一页", |
||||
|
nextPage: "下一页", |
||||
|
fastForward: 0, |
||||
|
selectOption: [], |
||||
|
backFun: function (t) {} |
||||
|
}; |
||||
|
var img = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABAUlEQVQ4T5WTsUrEQBCG//FYxC7BlxDfZ9t0O8EivY0YBEGbqwTJbBauUA8tfIqzsBH18BXyDKkSiUQIRza32XJ2/2+/2WUIIytJkmOl1Ilz7m1sf1gj3wFmPgOwFZHNFMQL6ELMfA5gMwWZBHQQY8wtEb2KyPuYyV5AD1kS0fMYJAgAgIwxd0TkROQj6BF3dfM8P6iq6h5AMYSEGvzxtNaLOI5d0zTLsiy/u9osADMrACsANyKynQXowm3bPgG4ttZ+/rcYZOALBxlkWXZY1/XD7s1BBn34BcDlUDvoG/vwGsCVL+xtQWt9FEXRI4ALa+3P7GFK0/QUgCqK4mvfOP8CEjZjEfl6lvkAAAAASUVORK5CYII=' |
||||
|
function i(t, e) { |
||||
|
this.element = p(t); |
||||
|
this.settings = p.extend({}, s, e); |
||||
|
this.pageNum = 1, this.pageList = [], this.pageTatol = 0; |
||||
|
this.init() |
||||
|
} |
||||
|
p.extend(i.prototype, { |
||||
|
init: function () { |
||||
|
this.element.empty(); |
||||
|
this.viewHtml() |
||||
|
this.clickBtn() |
||||
|
}, |
||||
|
creatHtml: function (t) { |
||||
|
t == this.settings.page ? this.pageList.push('<button class="active" data-page=' + t + ">" + t + "</button>") : this.pageList.push("<button data-page=" + t + ">" + t + "</button>") |
||||
|
}, |
||||
|
viewHtml: function () { |
||||
|
var t = this.settings; |
||||
|
var e = 0; |
||||
|
var a = []; |
||||
|
if (t.total > 0) { |
||||
|
e = Math.ceil(t.total / t.pageSize) |
||||
|
} else { |
||||
|
if (t.noData) { |
||||
|
e = 1; |
||||
|
t.page = 1; |
||||
|
t.total = 0 |
||||
|
} else { |
||||
|
return |
||||
|
} |
||||
|
} |
||||
|
this.pageTatol = e; |
||||
|
this.pageNum = t.page; |
||||
|
if (t.showTotal) { |
||||
|
a.push('<div class="spage-total">' + t.totalTxt.replace(/\{(\w+)\}/gi, t.total) + "</div>") |
||||
|
} |
||||
|
a.push('<div class="spage-number">'); |
||||
|
this.pageList = []; |
||||
|
if (t.showPN) { |
||||
|
t.page == 1 ? this.pageList.push('<button class="button-disabled" data-page="prev"><i class="prevBtn"></i></button>') : this.pageList.push('<button data-page="prev"><i class="prevBtn"></i></button>') |
||||
|
} |
||||
|
if (e <= 6) { |
||||
|
for (var s = 1; s < e + 1; s++) { |
||||
|
this.creatHtml(s) |
||||
|
} |
||||
|
} else { |
||||
|
if (t.page < 3) { |
||||
|
for (var s = 1; s <= 3; s++) { |
||||
|
this.creatHtml(s) |
||||
|
} |
||||
|
this.pageList.push('<button data-page="after" class="spage-after">...</button><button data-page=' + e + ">" + e + "</button>") |
||||
|
} else if (t.page > e - 3) { |
||||
|
this.pageList.push('<button data-page="1">1</button><button data-page="before" class="spage-before">...</button>'); |
||||
|
for (var s = e - 3; s <= e; s++) { |
||||
|
this.creatHtml(s) |
||||
|
} |
||||
|
} else { |
||||
|
this.pageList.push('<button data-page="1">1</button>'); |
||||
|
if (t.page > 3) { this.pageList.push('<button data-page="before" class="spage-before">...</button>') } |
||||
|
for (var s = t.page - 1; s <= Number(t.page) + 1; s++) { |
||||
|
this.creatHtml(s) |
||||
|
} |
||||
|
if (t.page <= e - 3) { this.pageList.push('<button data-page="after" class="spage-after">...</button>') } |
||||
|
this.pageList.push('<button data-page=' + e + ">" + e + "</button>") |
||||
|
} |
||||
|
} |
||||
|
if (t.showPN) { |
||||
|
t.page == e ? this.pageList.push('<button class="button-disabled" data-page="next"><i class="nextBtn"></i></button>') : this.pageList.push('<button data-page="next"><i class="nextBtn"></i></button>') |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
a.push(this.pageList.join("")); |
||||
|
a.push("</div>"); |
||||
|
|
||||
|
|
||||
|
if (t.selectOption.length > 0) { |
||||
|
var str = '<select class="selectNum" id="selectNum">' |
||||
|
for (var i = 0; i <= t.selectOption.length - 1; i++) { |
||||
|
str += '<option value=' + t.selectOption[i] + ' ' |
||||
|
if (t.pageSize === t.selectOption[i]) { |
||||
|
str += 'selected' + '>' + t.selectOption[i] + '行/页</option>' |
||||
|
} else { |
||||
|
str += '>' + t.selectOption[i] + '行/页</option>' |
||||
|
} |
||||
|
} |
||||
|
str += '</select>' |
||||
|
a.push(str); |
||||
|
} |
||||
|
if (t.showSkip) { |
||||
|
a.push('<div class="spage-skip">跳至 <input type="text" class="luckysheet-mousedown-cancel" value="' + t.page + '"/> 页 </div>') |
||||
|
} |
||||
|
|
||||
|
this.element.html(a.join("")); |
||||
|
|
||||
|
|
||||
|
|
||||
|
}, |
||||
|
clickBtn: function () { |
||||
|
var a = this; |
||||
|
var s = this.settings; |
||||
|
var i = this.element; |
||||
|
var n = this.pageTatol; |
||||
|
this.element.on('change', 'select', function (e) { |
||||
|
var value = parseInt(document.getElementById('selectNum').value) |
||||
|
s.pageSize = value |
||||
|
s.page = 1 |
||||
|
a.element.empty(); |
||||
|
a.viewHtml() |
||||
|
s.backFun(s) |
||||
|
}) |
||||
|
this.element.off("click", "button"); |
||||
|
this.element.on("click", "button", function () { |
||||
|
var t = p(this).data("page"); |
||||
|
switch (t) { |
||||
|
case "prev": |
||||
|
s.page = s.page - 1 >= 1 ? s.page - 1 : 1; |
||||
|
t = s.page; |
||||
|
break; |
||||
|
case "next": |
||||
|
s.page = Number(s.page) + 1 <= n ? Number(s.page) + 1 : n; |
||||
|
t = s.page; |
||||
|
break; |
||||
|
case "before": |
||||
|
s.page = s.page - s.fastForward >= 1 ? s.page - s.fastForward : 1; |
||||
|
t = s.page; |
||||
|
break; |
||||
|
case "after": |
||||
|
s.page = Number(s.page) + Number(s.fastForward) <= n ? Number(s.page) + Number(s.fastForward) : n; |
||||
|
t = s.page; |
||||
|
break; |
||||
|
case "go": |
||||
|
var e = parseInt(i.find("input").val()); |
||||
|
if (/^[0-9]*$/.test(e) && e >= 1 && e <= n) { |
||||
|
s.page = e; |
||||
|
t = e |
||||
|
} else { |
||||
|
return |
||||
|
} |
||||
|
break; |
||||
|
default: |
||||
|
s.page = t |
||||
|
} |
||||
|
if (t == a.pageNum) { |
||||
|
return |
||||
|
} |
||||
|
a.pageNum = s.page; |
||||
|
a.viewHtml(); |
||||
|
s.backFun(s) |
||||
|
}); |
||||
|
this.element.off("keyup", "input"); |
||||
|
this.element.on("keyup", "input", function (t) { |
||||
|
if (t.keyCode == 13) { |
||||
|
var e = parseInt(i.find("input").val()); |
||||
|
if (/^[0-9]*$/.test(e) && e >= 1 && e <= n && e != a.pageNum) { |
||||
|
s.page = e; |
||||
|
a.pageNum = e; |
||||
|
a.viewHtml(); |
||||
|
s.backFun(s) |
||||
|
} else { |
||||
|
return |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
if (s.fastForward > 0) { |
||||
|
i.find(".spage-after").hover(function () { |
||||
|
p(this).html("»") |
||||
|
}, function () { |
||||
|
p(this).html("...") |
||||
|
}); |
||||
|
i.find(".spage-before").hover(function () { |
||||
|
p(this).html("«") |
||||
|
}, function () { |
||||
|
p(this).html("...") |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
p.fn.sPage = function (t) { |
||||
|
return this.each(function () { |
||||
|
new i(this, t) |
||||
|
}) |
||||
|
} |
||||
|
})(jQuery, window, document); |
||||
Loading…
Reference in new issue