一个doT分页的demo

一个doT分页的demo

除了jQuery外,需要导入3个js, <script**type=“text/javascript”src=**”js/doT.min.js”></script> <script**type=“text/javascript”src=**”js/jquery.pagination.js”></script> <script**type=“text/javascript”src=**”js/my.page.js”></script> 直接上my.page.js代码:

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
var Page = (function(obj) {
var pageInfo={
pageSize:10,
currentPage:1,
totalPage:0,
totalNumber:0
},param={},arry=[],url="",TPL="",el="",pageEl="";

obj.init = function(el,tplEl,pageEl,url){
this.TPL = doT.template(tplEl.text());
this.el = el;
this.pageEl = pageEl;
this.url = url;
}
obj.setQueryParam = function(param){
this.param = param;
}
obj.render = function(){

var _this = this;
var data = {
arry:_this.arry,
pageInfo:_this.pageInfo

}
_this.el.empty().html(_this.TPL(data));

$("#resultNum").text(_this.pageInfo.totalNumber);

if(_this.pageInfo.totalNumber!=0){
$("#page").pagination({
totalData: _this.pageInfo.totalNumber,
showData: _this.pageInfo.pageSize,
current:_this.pageInfo.currentPage,
mode: 'fixed',
callback: function (api) {
_this.param['queryKey:pageIndex'] = api.getCurrent();
_this.getData();
}
});
$("#page").append($('<select id="pageSizeSelect" οnchange="Page.pageSizeChange(this.value)"><option value="10">10条</option><option value="20">20条</option><option value="30">30条</option></select>'))

$("#pageSizeSelect").val(_this.pageInfo.pageSize);
$("#page").show();
}else{
$("#page").hide();
}
}
obj.pageSizeChange = function(size){
this.param['queryKey:pageIndex'] = 1;
this.param['queryKey:pageSize'] = size;

this.getData();
}
obj.getData = function(){
var _this = this;
$.ajax({
type : "POST",
dataType : "xml",
data:_this.param,
url :_this.url,
success : function(data) {
var errCode = _getXmlNodeValue(data,"context>error-code");
if( errCode != '000000' ){
var errDesc = _getXmlNodeValue(data,"context>error-desc");
alert( '处理错误[' + errCode + '] ==> ' + errDesc );
return;
}
var listStr = _getXmlNodeValue(data,"context>result>list");
var pageInfoStr = _getXmlNodeValue(data,"context>result>pageInfo");

_this.pageInfo = JSON.parse(pageInfoStr);
_this.arry = JSON.parse(listStr);

_this.render();


},
error : function(data) {
alert(data);
}
});
}


return obj;
})(window.Page || {});

需要加上自己的默认分页查询:

1
2
3
4
5
6
7
8
9
10
/*配置分页*/
Page.init($("#resultContent"),$("#tpl"),$("#page"),"/action.ajax");


/*默认查询*/
var PARAM_FILTER = {};
PARAM_FILTER['queryKey:pageIndex'] = 1;
PARAM_FILTER['queryKey:pageSize'] = 10;
Page.setQueryParam(PARAM_FILTER);
Page.getData();

加上Pagination:

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
public class Pagination {

/** 每页显示条数 */
private Integer pageSize = 10;

/** 当前页 */
private Integer currentPage = 1;

/** 总页数 */
private Integer totalPage = 1;

/** 查询到的总数据量 */
private Long totalNumber = 0L;

public Pagination() {
}

public Pagination(Integer pageIndex,Integer pageSize,Long totalNumber) {
this.pageSize = pageSize;
this.currentPage = pageIndex;
this.totalNumber = totalNumber;
int divisor = (int) (this.totalNumber / this.pageSize);
int remainder = (int) (this.totalNumber % this.pageSize);
this.totalPage = remainder == 0 ? divisor == 0 ? 1 : divisor : divisor + 1;
}

public Integer getPageSize() {
return pageSize;
}

public void setPageSize(Integer pageSize) {
this.pageSize = pageSize;
}

public Integer getCurrentPage() {
return currentPage;
}

public void setCurrentPage(Integer currentPage) {
this.currentPage = currentPage;
}

public Integer getTotalPage() {
return totalPage;
}

public void setTotalPage(Integer totalPage) {
this.totalPage = totalPage;
}

public Long getTotalNumber() {
return totalNumber;
}

public void setTotalNumber(Long totalNumber) {
this.totalNumber = totalNumber;
}
}

本作品采用知识共享署名 4.0 中国大陆许可协议进行许可,欢迎转载,但转载请注明来自御前提笔小书童,并保持转载后文章内容的完整。本人保留所有版权相关权利。

本文链接:https://royalscholar.cn/2018/03/26/一个doT分页的demo/

# DoT

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×