数据查询操作浏览器分页流程及代码

一、需求环境：
用户在检索、加载资源列表时，需要每页固定加载若干条资源（本项目以每页加载一条为例）
二、加载流程：
常用的有两种加载流程：
1.用户在检索数据时将所有检索的数据都加载到浏览器缓存中，每次用户需要加载下一个页面的数据，则自动从缓存中加载数据；
2.用户在检索数据时，每次只从数据库检索用户需要的数据量，每次从数据库重新加载数据，（建议使用，保证在用户对数据操作的事务性，本实例便采用此流程）
三、实例及代码
资源加载区域代码：（具体样式请根据项目实际情况修改）

<div class="">
<table class="siteInfoWidth1 tableDate" style="width: 780px;">
<tr class="tdwait">
<td class="tdwait1">字段1</td>
<td class="tdwait1">字段2</td>
<td class="tdwait1">字段3</td>
<td class="tdwait1">选择操作</td>
</tr>
<tbody id="repayedListForLoan">
<!-- 数据加载模块 -->
</tbody>
</table>
<!--  页面分页模块   -->
<div class="jz_noData" id="noData"> 暂无可抵押净资产  </div>
<div class="siteInfoWidth ht1"></div>
<div class="black2" id="pageDiv"></div>
</div>

页面初步效果：



业务流程：（主要是JS代码）
1.页面加载事，加载第一页的数据：
JS代码：

$(function() {
//加载table数据
initData();
});

initData公用方法：

function initData() {
<span style="white-space:pre">	</span>var data = {};
<span style="white-space:pre">	</span>pager_container= "pageDiv";
<span style="white-space:pre">	</span>getPageFrom(data, "url",generateInvestRecordsTable, "repayedListForLoan");
}

拼接html到repayedListForLoan,加载数据列表：

function generateInvestRecordsTable(data) {
var title = data.borrowTitle;
//alert(title);
var htmlStr = "<tr class='sl_tf'>";
htmlStr += "<td >" + data.totalTender + "</td>"
+  "<td>" + data.endTimeStr + "</td>"
+  "<td>" + data.borrowTitle +"</td>"
+  "<td><input type=\"radio\" class=\"jz_radio\" name=\"investMoney\" value='"+data.tenderId+"' onclick=\"selectLoan($(this))\"/></td>"
htmlStr += "</tr>";
return htmlStr;
};

封装的Ajax请求方法：

<
4000
pre class="html"> /**
* 分页查询方法
* @param params 查询参数
* @param url 请求路径
* @param callBack 回调函数，用户拼接HTML元素
* @param tableId 拼接的html绑定到那个元素
* @param curPage 当前页，可不传入
* @param isAsyncParam 是否异步，true或者false，不传默认为true异步
* @param jumpCallBackParam 下一页上一页按钮的回调函数，不传入则不调用
*/
function getPageFrom(params, url, callBack, tableId, curPage, isAsyncParam,
jumpCallBackParam) {
if (curPage == undefined || curPage == null) {
curPage = 1;
}
if (params != undefined && params != null) {
paramsObject = params;
}
if (url != undefined && url != null) {
urlObject = url;
}
if (callBack != undefined && callBack != null) {
callBackObject = callBack;
}
if (tableId != undefined && tableId != null) {
tableIdObject = tableId;
}
// 是否是异步，如果传入此参数已传入参数为准，未传入默认为异步，
if (isAsyncParam != undefined && isAsyncParam != null) {
isAsync = isAsyncParam;
} else {
isAsync = true;
}
if (jumpCallBackParam != undefined && jumpCallBackParam != null) {
jumpCallBackObject = jumpCallBackParam;
}
paramsObject.pageNum = curPage;
$.ajax({
dataType : 'json',
url : urlObject,
data : paramsObject,
type : 'POST',
async : isAsync,
beforeSend : function() {
initInvestRecordsTable();
$("#" + tableId).append(Util.callType.loading("加载中..."));
},
success : function(data) {
initInvestRecordsTable();
if (data != null) {
listData = data.list;
dataHtml = "";
if (listData.length > 0) {
var isLastRow = false;
for (i = 0; i < listData.length; i++) {
if (i == (listData.length - 1)) {
isLastRow = true;
}
dataHtml += callBackObject(listData[i], i,
isLastRow);
}
if (dataHtml != "") {
$(".r5").html(data.totalRecord);
if (pager_container == null) {
dataHtml += pager_function(data);
} else {
$("#" + pager_container).html(
pager_function(data));
}
$("#" + tableIdObject).html(dataHtml);
}
} else {
if(tableId.indexOf("repayedListForLoan")!=-1){
$("#noData").show();
}else{
$("#" + tableId).append(
Util.callType.loading("暂无数据"));
$(".r5").removeClass("r5");
$(".load32").removeClass("load32");
}
}
}
},
error : function() {
initInvestRecordsTable();
$("#" + tableId).append(Util.callType.loading("加载错误"));
}
});
}封装的分页页面逻辑代码：

var couponEntry = $("#couponEntry"), couponItem = couponEntry
.find(".couponItem");
var couponPageSize = 5, couponRecordsCount = couponItem.length, couponPageCount = Math
.ceil(couponRecordsCount / couponPageSize);

var couponPageSize = 5, couponRecordsCount = couponItem.length, couponPageCount = Math
.ceil(couponRecordsCount / couponPageSize);

var paramsObject;
var urlObject;
var callBackObject;
var jumpCallBackObject;
var tableIdObject;
var isAsync;
var pager_container = null; // 分页组件容器ID
var pager_function = createPager; // 构造分页方法

function couponGoToPage(currentPage) {
var start = (currentPage - 1) * couponPageSize, end = currentPage
* couponPageSize - 1;
couponItem.hide();
for ( var i = start; i <= end; i++) {
$(couponItem[i]).show();
}
$("#couponTablePager").remove();
if (couponRecordsCount > couponPageSize) {
couponEntry.append(pager_function(currentPage, couponPageCount,
"couponTablePager", "couponGoToPage"));
}
}

function initInvestRecordsTable() {
$("#" + tableIdObject + "").html("");
}

// 动态创建页标签
function createPager(page) {
var currentPage = Number(page.currentPage);
var pageCount = Number(page.totalPage);
var pagerHtml = '';
pagerHtml += '<div class="invest_page"><div class="page">';

if (currentPage > 1) {
pagerHtml += '<a href="javascript:jumpPage(' + (currentPage - 1)
+ ');">上一页</a>';
} else {
pagerHtml += '<a href="javascript:;" class="disabled">上一页</a>';
}

var showTotalPageNum = 8;
if (pageCount > showTotalPageNum) {
// 在第四页和倒数第四页之间
if (currentPage > 4 && currentPage <= pageCount - 4) {
pagerHtml += '<a href="javascript:jumpPage(1);">1</a>';
pagerHtml += '<span>...</span>';
pagerHtml += '<a href="javascript:jumpPage(' + (currentPage - 2)
+ ');">' + (currentPage - 2) + '</a>';
pagerHtml += '<a href="javascript:jumpPage(' + (currentPage - 1)
+ ');">' + (currentPage - 1) + '</a>';
pagerHtml += '<a class="current" href="javascript:;" >'
+ currentPage + '</a>';
pagerHtml += '<a href="javascript:jumpPage(' + (currentPage + 1)
+ ');">' + (currentPage + 1) + '</a>';
pagerHtml += '<a href="javascript:jumpPage(' + (currentPage + 2)
+ ');">' + (currentPage + 2) + '</a>';
pagerHtml += '<span>...</span>';
pagerHtml += '<a href="javascript:jumpPage(' + pageCount + ');">'
+ pageCount + '</a>';
// 第四页之前
} else if (currentPage <= 4) {
for ( var i = 1; i <= 4; i++) {
if (i == currentPage) {
pagerHtml += '<a class="current" href="javascript:;" >' + i
+ '</a>';
} else {
pagerHtml += '<a href="javascript:jumpPage(' + i + ');">'
+ i + '</a>';
}
}
if (currentPage == 3) {
pagerHtml += '<a href="javascript:jumpPage(5);">5</a>';
}
if (currentPage == 4) {
pagerHtml += '<a href="javascript:jumpPage(5);">5</a>';
pagerHtml += '<a href="javascript:jumpPage(6);">6</a>';
}

pagerHtml += '<span>...</span>';
pagerHtml += '<a href="javascript:jumpPage(' + pageCount + ');">'
+ pageCount + '</a>';
// 倒数第四页之后
} else if (currentPage > pageCount - 4) {
pagerHtml += '<a href="javascript:jumpPage(1);">1</a>';
pagerHtml += '<span>...</span>';

if (currentPage == pageCount - 2) {
pagerHtml += '<a href="javascript:jumpPage(' + (pageCount - 4)
+ ');">' + (pageCount - 4) + '</a>';
}

if (currentPage == pageCount - 3) {
pagerHtml += '<a href="javascript:jumpPage(' + (pageCount - 5)
+ ');">' + (pageCount - 5) + '</a>';
pagerHtml += '<a href="javascript:jumpPage(' + (pageCount - 4)
+ ');">' + (pageCount - 4) + '</a>';
}

for ( var i = pageCount - 3; i <= pageCount; i++) {
if (i == currentPage) {
pagerHtml += '<a class="current" href="javascript:;" >' + i
+ '</a>';
} else {
pagerHtml += '<a href="javascript:jumpPage(' + i + ');">'
+ i + '</a>';
}
}
}
// 小于页数限额
} else {
for ( var i = 1; i <= pageCount; i++) {
if (i == currentPage) {
pagerHtml += '<a class="current" href="javascript:;" >' + i
+ '</a>';
} else {
pagerHtml += '<a href="javascript:jumpPage(' + i + ');">' + i
+ '</a>';
}
}
}

if (pageCount >= currentPage + 1) {
pagerHtml += '<a href="javascript:jumpPage(' + (currentPage + 1)
+ ');">下一页</a>';
} else {
pagerHtml += '<a href="javascript:;" class="disabled">下一页</a>';
}
//跳转到第几页
//	pagerHtml += '<input id="pageNum" value="123"/><input type="button" value="跳转" onclick="jumpPage();"/>';
pagerHtml += '</div></div>';
return pagerHtml;
}

function jumpPage(page) {
if (page == undefined) {
page = $("#pageNum").val();
if (!/^\d+$/.test(page)) {
alertc("只能输入数字");
return;
}
}
getPageFrom(null, null, null, null, page, isAsync);
if (jumpCallBackObject != undefined && jumpCallBackObject != null) {
jumpCallBackObject();
}
}
/**
* 分页查询方法
* @param params 查询参数
* @param url 请求路径
* @param callBack 回调函数，用户拼接HTML元素
* @param tableId 拼接的html绑定到那个元素
* @param curPage 当前页，可不传入
* @param isAsyncParam 是否异步，true或者false，不传默认为true异步
* @param jumpCallBackParam 下一页上一页按钮的回调函数，不传入则不调用
*/
function getPageFrom(params, url, callBack, tableId, curPage, isAsyncParam,
jumpCallBackParam) {
if (curPage == undefined || curPage == null) {
curPage = 1;
}
if (params != undefined && params != null) {
paramsObject = params;
}
if (url != undefined && url != null) {
urlObject = url;
}
if (callBack != undefined && callBack != null) {
callBackObject = callBack;
}
if (tableId != undefined && tableId != null) {
tableIdObject = tableId;
}
// 是否是异步，如果传入此参数已传入参数为准，未传入默认为异步，
if (isAsyncParam != undefined && isAsyncParam != null) {
isAsync = isAsyncParam;
} else {
isAsync = true;
}
if (jumpCallBackParam != undefined && jumpCallBackParam != null) {
jumpCallBackObject = jumpCallBackParam;
}
paramsObject.pageNum = curPage;
$
.ajax({
dataType : 'json',
url : urlObject,
data : paramsObject,
type : 'POST',
async : isAsync,
beforeSend : function() {
initInvestRecordsTable();
$("#" + tableId).append(Util.callType.loading("加载中..."));
},
success : function(data) {
initInvestRecordsTable();
if (data != null) {
listData = data.list;
dataHtml = "";
if (listData.length > 0) {
var isLastRow = false;
for (i = 0; i < listData.length; i++) {
if (i == (listData.length - 1)) {
isLastRow = true;
}
dataHtml += callBackObject(listData[i], i,
isLastRow);
}
if (dataHtml != "") {
$(".r5").html(data.totalRecord);
if (pager_container == null) {
dataHtml += pager_function(data);
} else {
$("#" + pager_container).html(
pager_function(data));
}
$("#" + tableIdObject).html(dataHtml);
}
} else {
if(tableId.indexOf("repayedListForLoan")!=-1){
$("#noData").show();
}else{
$("#" + tableId).append(
Util.callType.loading("暂无数据"));
$(".r5").removeClass("r5");
$(".load32").removeClass("load32");
}
}
}
},
error : function() {
initInvestRecordsTable();
$("#" + tableId).append(Util.callType.loading("加载错误"));
}
});
}

// 动态创建页标签
function usrInfoPager(page) {
var currentPage = Number(page.currentPage);
var pageCount = Number(page.totalPage);
var pagerHtml = '';
pagerHtml += '<div class="invest_page"><div class="page">';

if (currentPage > 1) {
pagerHtml += '<a href="javascript:jumpPage(' + (currentPage - 1)
+ ');">上一页</a>';
} else {
pagerHtml += '<a href="javascript:;" class="disabled">上一页</a>';
}

var showTotalPageNum = 8;
if (pageCount > showTotalPageNum) {
// 在第四页和倒数第四页之间
if (currentPage > 4 && currentPage <= pageCount - 4) {
pagerHtml += '<a href="javascript:jumpPage(1);">1</a>';
pagerHtml += '<span>...</span>';
pagerHtml += '<a href="javascript:jumpPage(' + (currentPage - 2)
+ ');">' + (currentPage - 2) + '</a>';
pagerHtml += '<a href="javascript:jumpPage(' + (currentPage - 1)
+ ');">' + (currentPage - 1) + '</a>';
pagerHtml += '<a class="current" href="javascript:;" >'
+ currentPage + '</a>';
pagerHtml += '<a href="javascript:jumpPage(' + (currentPage + 1)
+ ');">' + (currentPage + 1) + '</a>';
pagerHtml += '<a href="javascript:jumpPage(' + (currentPage + 2)
+ ');">' + (currentPage + 2) + '</a>';
pagerHtml += '<span>...</span>';
pagerHtml += '<a href="javascript:jumpPage(' + pageCount + ');">'
+ pageCount + '</a>';
// 第四页之前
} else if (currentPage <= 4) {
for ( var i = 1; i <= 4; i++) {
if (i == currentPage) {
pagerHtml += '<a class="current" href="javascript:;" >' + i
+ '</a>';
} else {
pagerHtml += '<a href="javascript:jumpPage(' + i + ');">'
+ i + '</a>';
}
}
if (currentPage == 3) {
pagerHtml += '<a href="javascript:jumpPage(5);">5</a>';
}
if (currentPage == 4) {
pagerHtml += '<a href="javascript:jumpPage(5);">5</a>';
pagerHtml += '<a href="javascript:jumpPage(6);">6</a>';
}
pagerHtml += '<span>...</span>';
pagerHtml += '<a href="javascript:jumpPage(' + pageCount + ');">'
+ pageCount + '</a>';
// 倒数第四页之后
} else if (currentPage > pageCount - 4) {
pagerHtml += '<a href="javascript:jumpPage(1);">1</a>';
pagerHtml += '<span>...</span>';
if (currentPage == pageCount - 2) {
pagerHtml += '<a href="javascript:jumpPage(' + (pageCount - 4)
+ ');">' + (pageCount - 4) + '</a>';
}
if (currentPage == pageCount - 3) {
pagerHtml += '<a href="javascript:jumpPage(' + (pageCount - 5)
+ ');">' + (pageCount - 5) + '</a>';
pagerHtml += '<a href="javascript:jumpPage(' + (pageCount - 4)
+ ');">' + (pageCount - 4) + '</a>';
}
for ( var i = pageCount - 3; i <= pageCount; i++) {
if (i == currentPage) {
pagerHtml += '<a class="current" href="javascript:;" >' + i
+ '</a>';
} else {
pagerHtml += '<a href="javascript:jumpPage(' + i + ');">'
+ i + '</a>';
}
}
}
// 小于页数限额
} else {
for ( var i = 1; i <= pageCount; i++) {
if (i == currentPage) {
pagerHtml += '<a class="current" href="javascript:;" >' + i
+ '</a>';
} else {
pagerHtml += '<a href="javascript:jumpPage(' + i + ');">' + i
+ '</a>';
}
}
}
if (pageCount >= currentPage + 1) {
pagerHtml += '<a href="javascript:jumpPage(' + (currentPage + 1)
+ ');">下一页</a>';
} else {
pagerHtml += '<a href="javascript:;" class="disabled">下一页</a>';
}
pagerHtml += '</div></div>';
return pagerHtml;
}

注：以上代码可能在实际项目运行中有出错的地方，请自行根据项目实际需求，进行甄别。