page.js
5.0 KB
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
; +
(function () {
class ZUI {
constructor() {
}
paging(options) {
new Paging(options)
}
}
self.ZUI = new ZUI()
var paging_defult = {
prev_next_text: '上一页|下一页',
current: 1,
page_len: 7,
color: '#009688'
}
function Paging(opt) {
var xx = this
xx.callBack = opt.callBack
$.each(opt, function (indexInArray, valueOfElement) {
paging_defult[indexInArray] = valueOfElement
});
if (!paging_defult.count || !paging_defult.selector) {
alert('参数count,selector必填!')
return
}
xx.count = paging_defult.count
xx.elem = $(paging_defult.selector)
xx.prev_next_text = paging_defult.prev_next_text
xx.page_len = paging_defult.page_len
xx.current = paging_defult.current
xx.color = paging_defult.color
xx.insertElement()
}
Paging.prototype.createTemplate = function () {
var xx = this
var t_arr = xx.prev_next_text.split('|'),
i, b = '',
c, str, f = xx.page_len
if (f - xx.current <= 2 && xx.count - xx.current >= (f - 3)) {
c = (f - 1 - 2) / 2,
i = -c, str
while (i <= c) {
i == 0 ? b += '<a href="javascript:;" data-page="curr" style="background-color: '+ xx.color +';" class="zui-page-curr">' + (xx.current) + '</a>' : b += '<a data-page=' + (+xx.current + i) + '>' + (+xx.current + i) + '</a>'
i++
}
str = `
<a href="javascript:;" data-page="prev">${t_arr[0]}</a>
<a href="javascript:;" data-page="1">1</a>
<a href="javascript:;" data-page="mid" class="zui-page-spr">…</a>
${b}
<a href="javascript:;" data-page="mid" class="zui-page-spr">…</a>
<a href="javascript:;" data-page="${xx.count}">${xx.count}</a>
<a href="javascript:;" data-page="next">${t_arr[1]}</a>
`
} else if (0 < xx.current && xx.current <= (f - 3)) {
i = 1
while (i <= (f - 2)) {
i == +xx.current ? b += '<a href="javascript:;" data-page="curr" style="background-color: '+ xx.color +';" class="zui-page-curr">' + (i) + '</a>' : b += '<a href="javascript:;" data-page=' + (i) + '>' + (i) + '</a>'
i++
}
str = `
<a href="javascript:;" data-page="prev" class="zui-page-noallow">${t_arr[0]}</a>
${b}
<a href="javascript:;" data-page="mid" class="zui-page-spr">…</a>
<a href="javascript:;" data-page="${xx.count}">${xx.count}</a>
<a href="javascript:;" data-page="next">${t_arr[1]}</a>
`
} else if ((xx.count - (f - 3)) < xx.current && xx.current <= xx.count) {
i = (f - 2) - 1
while (i >= 0) {
xx.count - i == xx.current ? b += '<a style="background-color: '+ xx.color +';" href="javascript:;" class="zui-page-curr">' + (xx.count - i) + '</a>' : b += '<a href="javascript:;" data-page=' + (xx.count - i) + '>' + (xx.count - i) + '</a>'
i--
}
str = `
<a href="javascript:;" data-page="prev">${t_arr[0]}</a>
<a href="javascript:;" data-page="1">1</a>
<a href="javascript:;" data-page="mid" class="zui-page-spr">…</a>
${b}
<a href="javascript:;" data-page="next" class="zui-page-noallow">${t_arr[1]}</a>
`
}
return str
}, Paging.prototype.insertElement = function () {
var xx = this
var str = this.createTemplate(),
s = `
<div class="zui-page">
${str}
</div>
`
xx.elem.html(s)
xx.pagingClick()
}, Paging.prototype.pagingClick = function () {
var xx = this
xx.elem.on('click', 'a', function (e) {
var page = $(this).attr('data-page')
if (page != 'curr' && page != 'mid') {
if (page == 'prev') {
if (!$(this).attr('class')) {
xx.current--
xx.callBack(xx.current)
xx.elem.find('.zui-page').html(xx.createTemplate())
} else if ($(this).attr('class').indexOf('zui-page-noallow') != -1) return
} else if (page == 'next') {
if (!$(this).attr('class')) {
xx.current++
xx.callBack(xx.current)
xx.elem.find('.zui-page').html(xx.createTemplate())
} else if ($(this).attr('class').indexOf('zui-page-noallow') != -1) return
} else {
xx.callBack(page)
xx.current = page
xx.elem.find('.zui-page').html(xx.createTemplate())
}
}
})
}
})(window)