Pagination.js
3.42 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
define(["mUtil", "i18n"],function (mUtil, i18n) {
var tmpl = '\
<div id="${uid}">\
<div class="wev-no-data">${tip}</div>\
<div class="wev-pagination">\
<div class="wev-flex">\
<div class="wev-flex-item wev-pagination-item">\
<div class="wev-pagination-detail">\
(<span>${perLabel}$${split}<span class="page-size">--</span>$${split}${itemLabel}</span>\
<span>,</span>\
<span>${totalLabel}$${split}<span class="total-size">--</span>$${split}${itemLabel}</span>)\
</div>\
</div>\
<div class="wev-flex">\
<div class="wev-flex-item wev-pagination-item">\
<div class="wev-pagination-btn wev-pagination-prev"><i class="wev-css-icon wev-prev"></i></div>\
</div>\
<div class="wev-flex-item wev-pagination-item">\
<div class="wev-pagination-content">\
<span class="current-page">--</span>\
<span>/</span>\
<span class="total-page">--</span>\
</div>\
</div>\
<div class="wev-flex-item wev-pagination-item">\
<div class="wev-pagination-btn wev-pagination-next"><i class="wev-css-icon wev-next"></i></div>\
</div>\
</div>\
</div>\
</div>\
</div>\
';
var Pagination = function(cfg){
var props = {
split: mUtil.getUserLanguage() == 8 ? " " : "",
perLabel: i18n.PER_PAGE,
totalLabel: i18n.TOTAL,
itemLabel: i18n.ITEMS,
tip: i18n.NO_DATA
};
$.extend(true, props, cfg);
var $currPage, $totalPage, $pageSize, $totalSize, $prevBtn, $nextBtn, $tip;
this.tmpl = tmpl;
this.props = props;
this.mounted = function(){
var $el = this.$el;
$currPage = $el.find(".current-page");
$totalPage = $el.find(".total-page");
$pageSize = $el.find(".page-size");
$totalSize = $el.find(".total-size");
$prevBtn = $el.find(".wev-pagination-prev.wev-pagination-btn");
$nextBtn = $el.find(".wev-pagination-next.wev-pagination-btn");
$tip = $el.find(".wev-no-data");
$prevBtn.on("click", function(){
!$(this).hasClass("disabled") && props.onPrev && props.onPrev.call(this);
});
$nextBtn.on("click", function(){
!$(this).hasClass("disabled") && props.onNext && props.onNext.call(this);
});
};
this.setCurrPage = function(currPage, pageSize, totalSize, startPage){
var totalPage = totalSize % pageSize === 0 ? totalSize / pageSize : parseInt(totalSize / pageSize) + 1;
if(totalSize == 0 || pageSize == 0) totalPage = 1;
var noData = totalSize <= 0;
$prevBtn.toggleClass("disabled", currPage <= startPage);
$nextBtn.toggleClass("disabled", currPage >= totalPage);
$currPage.html(currPage);
$totalPage.html(totalPage);
$pageSize.html(pageSize);
$totalSize.html(totalSize);
$tip[noData ? "show" : "hide"]();
}
};
return Pagination;
});