分页相信大家都不陌生,写也写过好多遍.只是每次都是反复的,故而想封装下,简化以后代码的编写.首先声明因为本人编写时间不长,测试时间不长.如有bug.尽请原谅.欢迎联系,本人定当修改.此仅供参考,大牛请勿嘲笑。
首先封装使用了jquery 若使用请导入相应js 采用的是json传输格式,服务端用的是Gson 输出json格式
直接上代码
js代码
/**********************************************************************/
//AJAX 分页
/**
*
* 项目名称：SSE
* 名称：AJAXPage
* 类描述：
* 创建人: xuyw
* Email：xyw10000@163.com
* 创建时间：2014-1-9 上午10:27:55
* 备注：
* 版本：1.0
*
*/
//--调用方式
/*
var pageToolobj = pageTool({
"url" : "jsp/demo/pagetagdata.jsp",--查询url
"formId" : "fm1",--表单ID
"submitbtnId":"submitbtn",--提交按钮ID
"pageToolId" : "pagetool",--工具条显示ID即上一页下一页等选项出现在那里
"pageRowsCount" : "10,15,20",--一页展示多少条
"targetBody" : "pagetbody",--数据显示ID即在那里下循环遍历
"columnsName" : [ "ID", "CONTACT_NAME", "MOBILE", "ADDRESS", "DQ",
"CREATE_USER" ] -- 显示列名
});
*/
/**********************************************************************/
var pendpage = 1;// 尾页
var pcurrentpage = 1;// 当前页
var pagerowscount = 10;// 一页多少条
// 上此选中行的id
var selectedId = "#pagetr0";
function selectClass(id) {
$(selectedId).addClass("selectObj");
$(id).click(function() {
// 移除上次选中行的class:selected
if (selectedId != "") {
$(selectedId).removeClass("selectObj");
}
// 给当前点击行添加class:selected
$(this).addClass("selectObj");
// 更新上次选中行
selectedId = "#" + $(this).attr("id");
});
$(id).hover(function() {
$(this).addClass("hoverObj");
}, function() {
$(this).removeClass("hoverObj");
});
}
function pageTool(config) {
var object = new Object();
object.config = config;
var url = config.url;// 请求地址
if (!url) {
alert("请输入请求地址");
return;
}
var formId = config.formId;// 表单ID
if (!formId) {
alert("请输入表单ID");
return;
}
var pageToolId = config.pageToolId;// 显示工具条容器ID
if (!pageToolId) {
alert("请输工具条容器ID");
return;
}
var pageRowsCount = config.pageRowsCount;// 一页显示多少条
if (!pageRowsCount) {
pageRowsCount = "10,12,15,18";
}
createTool(pageToolId, pageRowsCount, 0, 0);
var targetBody = config.targetBody;
var columnsName = config.columnsName;
send(url, formId, targetBody, columnsName);
// var endPage = config.data.endpage;//总页数
object.gopage = function(cs) {
send(url + " currentPage=" + cs, formId, targetBody, columnsName);
};
var submitbtnId = config.submitbtnId;// 一页显示多少条
if (submitbtnId) {
$("#"+submitbtnId).click(function(){
gopage('1');
});
}
return object;
}
function createTool(id, pageRowsCount, totalpage, totalcount) {// 创建分页工具条
var html2 = new Array();
html2
.push("
");
$("#" + id).append(html2.join(""));
}
function updateTool(totalcont, currentpage, endpage) {// 更新工具条
$("#ptotalpage").html("").html(endpage);
$("#ptotalcount").html("").html(totalcont);
var up = currentpage - 1 > 0 currentpage - 1 : 1;
var down = currentpage + 1 > endpage endpage : currentpage + 1;
$("#puppage").attr("href", "java script：gopage('" + up + "')");
$("#pdownpage").attr("href", "java script：gopage('" + down + "')");
$("#pendpage").attr("href", "java script：gopage('" + endpage + "')");
$("#pcurrentpage").val(currentpage);
}
function send(url, formId, targetBody, columnsName) {
$.post(url, $("#" + formId).serialize(), function(data) {
$("#" + targetBody + " tr").remove();
var rowsdata = data.rowsdata;
var html = new Array();
for ( var i = 0; i < rowsdata.length; i++) {
html.push("");
var trowsdata = rowsdata[i];
for ( var j = 0; j < columnsName.length; j++) {
var tt = columnsName[j];
html.push("" + trowsdata[tt] + "");
}
html.push("");
}
$("#" + targetBody).append(html.join(""));
selectClass("#" + targetBody + " tr");
pendpage = data.endpage;
pcurrentpage = data.currentpage;
pagerowscount = data.pagerowscount;
updateTool(data.pagecount, pcurrentpage, pendpage);
});
}
function gopage(url) {
if (url == 'btngopage') {
url = $("#pcurrentpage").val();
var reg1 = /^\d+$/;
if (url.match(reg1) == null) {
alert("请输入合法的页码");
$("#pcurrentpage").focus();
return;
}
if (url * 1 > pendpage) {
alert("请输入存在的页码");
$("#pcurrentpage").focus();
return;
}
}
/*
if (pagerowscount == $("#pagerowscount").val()) {
if (pcu