TestQuery.jsp：
<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>订单列表</title>
</head>
<style>
.bg-3 td{
background-color: #f5efea;
}
.bg-2 td{
background-color: #fadfce;
}
</style>
<body>
<form id="form1">
</form>
<div style="width: 1024px; width: 1024px; margin: 20px auto;">
<div>
<table style="width: 100%">
<thead>
<tr style="color: green;">
<td>创建时间</td>
<td>创建人</td>
<td>手机号码</td>
</tr>
</thead>
<tbody id="tab1">
</tbody>
</table>
</div>
<div id="div_pager112"></div>
</div>
</body>
<script language=javascript type=text/javascript src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script>
<script language=javascript type=text/javascript src="js/query.js"></script>
<script language=javascript type=text/javascript src="js/page.js"></script>
</html>$(function() {
sjzx.init();
});
var sjzx = {
saleDataCount : 0,
init : function() {
sjzx.bind();
},
bind : function() {
sjzx.search(1, 10);
// 生成分页控件 根据分页的形式在这里设置
mypager.init({
// 显示分页的DIV的ID 必传
pagerid : 'div_pager112',
// 当前页 不传默认这1
pno : 1,
// 每页条数 不传默认为10
pagesize : 10,
// 总数据条数 必传 不传默认为0
totalRecords : sjzx.saleDataCount,
// 点击页码后的回调 不用的话可以不传
callback : function() {
alert(this.pno + " ----- " + this.pagesize);
sjzx.search(this.pno, this.pagesize);
}
});
},
search : function(pno, pagesize) {
$.ajax({
url : '/padlifeadmin/do/lifeThSmsValidInfo/query?pageNum=' + pno + '&pageSize=' + pagesize,
type : 'POST',
dataType : 'json',
data : $("#form1").serialize(),
async : false,
success : function(res) {//res 返回的是一个map格式的数据
var list = res.mapList;
sjzx.saleDataCount = res.countNum;
$('#tab1').html("");
for ( var i = 0; i < list.length; i++) {
var obj = list[i];
var o = "";
if (i % 2 == 0) {
o = "<tr class='bg-2'>";
} else {
o = "<tr class='bg-3'>";
}
o += "<td style='text-align:center; vertical-align:middle' >" + sjzx.getLocalTime(obj.CREATED_DATE) + "</td>"
+ "<td style='text-align:center; vertical-align:middle' >" + sjzx.changeNull(obj.CREATED_BY) + "</td>"
+ "<td style='text-align:center; vertical-align:middle' >" + sjzx.changeNull(obj.MOBILE) + "</td>";
o += "</tr>";
$('#tab1').append(o);
}
}
});
},
changeNull : function(data) {
if (data == null)
return "";
return data;
},
getLocalTime : function(now) {
if (!now) {
return "";
} else {
var d = new Date(now);
var year = d.getFullYear();
var month = d.getMonth() + 1;
month = month < 10 ? ("0" + month) : month;
var date = d.getDate();
date = date < 10 ? ("0" + date) : date;
var hour = d.getHours();
hour = hour < 10 ? ("0" + hour) : hour;
var minute = d.getMinutes();
minute = minute < 10 ? ("0" + minute) : minute;
var second = d.getSeconds();
second = second < 10 ? ("0" + second) : second;
return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
}
}
}
page.js
/**
* Created by EX-LIXIAOJIAN002 on 2014/12/24.
*/
window.document.write('<style>.page{text-align: center;padding: 30px 0 0 0;}.page span,.page a{display: inline-block;vertical-align: middle;height: 28px;line-height: 28px;padding: 0 12px;border: solid 1px #eee;text-decoration: none;margin: 0 5px;}.page .curr{background-color: #ff965a;}</style>');
var mypager = {
callback:null,
newConfig:{},
//divID
pagerid: 'div_pager',
//当前页码
pno: 1,
//总页码
total: 1,
pagesize:10,
//总数据条数
totalRecords: 0,
//是否显示总页数
isShowTotalPage: true,
//是否显示总记录数
isShowTotalRecords: true,
//绑定点击事件
bindEvent:function(){
$('.page_number_link').on('click',function(){
var me = $(this);
if(!me.hasClass('curr')){
mypager.newConfig.pno=$(this).data('no');
mypager.init(mypager.newConfig);
if(mypager.callback){
mypager.callback();
}
}
})
},
//分页按钮控件初始化
init: function (config) {
this.newConfig = config;
//赋值
this.pno = isNaN(config.pno) ? 1 : parseInt(config.pno);
this.total = isNaN(config.total) ? 1 : parseInt(config.total);
this.totalRecords = isNaN(config.totalRecords) ? 0 : parseInt(config.totalRecords>0?config.totalRecords:0);
this.pagesize = config.pagesize || 10;
this.pagesize = this.pagesize>0?this.pagesize:0;
this.total =parseInt(this.totalRecords/this.pagesize)+(this.totalRecords%this.pagesize == 0?0:1);
if(this.total == 0){return;}
if (config.pagerid) { this.pagerid = config.pagerid; }
if (config.isShowTotalPage != undefined) { this.isShowTotalPage = config.isShowTotalPage; }
if (config.isShowTotalRecords != undefined) { this.isShowTotalRecords = config.isShowTotalRecords; }
//验证
if (this.pno < 1) this.pno = 1;
this.total = (this.total <= 1) ? 1 : this.total;
if (this.pno > this.total) this.pno = this.total;
this.prv = (this.pno <= 2) ? 1 : (this.pno - 1);
this.next = (this.pno >= this.total - 1) ? this.total : (this.pno + 1);
this.hasPrv = (this.pno > 1);
this.hasNext = (this.pno < this.total);
if(config.callback && typeof config.callback == 'function'){
this.callback = config.callback;
};
this.inited = true;
this.generPageHtml();
this.bindEvent();
},
//生成分页控件Html
generPageHtml: function () {
if (!this.inited) {
return;
}
var str_prv = '', str_next = '';
if (this.hasPrv) {
str_prv = '<a class="page_number_link" data-no="'+this.prv+'" href="javascript:;" title="上一页">上一页</a>';
} else {
str_prv = '<span class="disabled">上一页</span>';
}
if (this.hasNext) {
str_next = '<a class="page_number_link" data-no="'+this.next+'" href="javascript:;" title="下一页">下一页</a>';
} else {
str_next = '<span class="disabled">下一页</span>';
}
var str = '';
var dot = '<span>...</span>';
var total_info = '';
if (this.isShowTotalPage || this.isShowTotalRecords) {
total_info = '<span class="normalsize">共';
if (this.isShowTotalPage) {
total_info += this.total + '页';
if (this.isShowTotalRecords) {
total_info += ' / ';
}
}
if (this.isShowTotalRecords) {
total_info += this.totalRecords + '条数据';
}
total_info += '</span>';
}
//分页处理
if (this.total <= 8) {
for (var i = 1; i <= this.total; i++) {
if (this.pno == i) {
str += '<span class="page_number_link curr">' + i + '</span>';
} else {
str += '<a class="page_number_link" data-no="'+i+'" href="javascript:;" title="第' + i + '页">' + i + '</a>';
}
}
} else {
if (this.pno <= 5) {
for (var i = 1; i <= 7; i++) {
if (this.pno == i) {
str += '<span class="curr">' + i + '</span>';
} else {
str += '<a class="page_number_link" data-no="'+i+'" href="javascript:;" title="第' + i + '页">' + i + '</a>';
}
}
str += dot;
} else {
str += '<a class="page_number_link" data-no="1" href="javascript:;" title="第1页">1</a>';
str += '<a class="page_number_link" data-no="2" href="javascript:;" title="第2页">2</a>';
str += dot;
var begin = this.pno - 2;
var end = this.pno + 2;
if (end > this.total) {
end = this.total;
begin = end - 4;
if (this.pno - begin < 2) {
begin = begin - 1;
}
} else if (end + 1 == this.total) {
end = this.total;
}
for (var i = begin; i <= end; i++) {
if (this.pno == i) {
str += '<span class="curr">' + i + '</span>';
} else {
str += '<a class="page_number_link" data-no="'+i+'" href="javascript:;" title="第' + i + '页">' + i + '</a>';
}
}
if (end != this.total) {
str += dot;
}
}
}
str = " <div class='page'><a class='page_number_link' href='javascript:;'>首页</a>" + str_prv + str + str_next +"<a class='page_number_link' data-no="+this.total+" href='javascript:;'>尾页</a>"+ total_info +"</div>";
$("#" + this.pagerid).html(str);
}
};
119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
