1、使用jquery编写一个分页组件
A、编写jsp数据展示页面，代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../../backstage/common.jsp"%> <!-- 添加了一些常用的js,css -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript"
src="<%=path%>/preStage/js/mygridData.js"></script>
<link rel="stylesheet" type="text/css" href="<%=path %>/preStage/js/css/mygridData.css">
<script type="text/javascript">
$(function(){
gridDataTable({
divId:'zhaoPinListDiv',
divTitle:'招聘英才',
cellTitle:['应聘职位','发布时间','已阅读','已应聘'],
cellSize:['50%','30%','10%','10%'],
dataUrl:'listData',
pageSize:1,
listType:1
});
});
</script>
<style type="text/css">
.tableCellTitle1,.tableCellTitle2,.tableCellTitle3{
text-align: center;
}
.tableContext1,.tableContext2,.tableContext3{
text-align: center;
}
</style>
</head>
<body>
<center>
<h3>
招聘信息列表
</h3>
<div id="zhaoPinListDiv" style="width: 700px; padding: 10px;">
</div>
</center>
</body>
</html>
B、编写核心分页功能（jquery编写）
/*自定义样式的表格数据列表*/
function gridDataTable(options){
var divContainer = $("#"+options.divId);
var divTitle = options.divTitle;
var cellTitleNames = options.cellTitle;
var cellSizeValues = options.cellSize;
var dataUrlReq = options.dataUrl;
var pageSizeValue = options.pageSize;
var cellColumnsValue = options.cellColumns;
var listTypeValue = options.listType;
//初始页面为1
var currentPage = 1;
//总页数
var totalPage;
//上一页按钮对象
var upPageButton = $("<button id ='upPageInput' style ='float:left; margin-left:20px;'>上一页</button>");
//下一页按钮对象
var downPageButton = $("<button id ='downPageInput' style ='float:right; margin-right:20px;'>下一页</button>");
addTableHeadDiv();
//表格对象
var dataTable = $("<table class='addDataTableContainer'></table>");
addDataTableTemp();
/*创建表格数据表头*/
function addTableHeadDiv(){
divContainer.append($("<div class='divTableHeadTitle'>"+divTitle+"</div><hr/>"));
}
/*定义生成数据表格对象*/
function addDataTableTemp(){
var trObj = $("<tr class='tableCellTitle' ></tr>");
for(var i =0;i<cellTitleNames.length;i++){
trObj.append("<td width='"+cellSizeValues[i]+"' class='tableCellTitle"+i+"'>"+cellTitleNames[i]+"</td>");
}
dataTable.append(trObj);
divContainer.append(dataTable);
var operationDiv = $("<div class = 'operationDiv'></div>");
operationDiv.append(upPageButton);
operationDiv.append(downPageButton);
divContainer.append("<hr/>");
divContainer.append(operationDiv);
bindClickEventToPagination();
}
addDataToTable();
/*为表格添加数据*/
function addDataToTable(){
//移除已有数据
$(".tableContext").remove();
var params = "page="+currentPage+"&rows="+pageSizeValue;
$.ajax({
url:dataUrlReq,
type:'post',
dataType:'json',
data:params,
success:function(data){
totalPage = Math.ceil(data.total/pageSizeValue);
if(listTypeValue ==1){
fullDataToTable1(data.rows);
}
}
});
}
/*招聘职位列表 cellColumns:['pName','createDate','scanCount','acceptCount'],*/
function fullDataToTable1(rowsData){
for(var i =0;i<rowsData.length;i++){
var rowData = rowsData[i];
var dataTr = $("<tr class = 'tableContext' id = '"+rowData.pId+"'></tr>");
dataTr.append("<td class='tableContext"+0+"'>"+rowData.pName+"</td>");
dataTr.append("<td class='tableContext"+1+"'>"+rowData.createDate+"</td>");
dataTr.append("<td class='tableContext"+2+"'>"+rowData.scanCount+"</td>");
dataTr.append("<td class='tableContext"+3+"'>"+rowData.acceptCount+"</td>");
dataTable.append(dataTr);
}
paginationShow();
}
/*分页按钮添加事件*/
function bindClickEventToPagination(){
$("#upPageInput").click(function(){
currentPage--;
addDataToTable();
});
$("#downPageInput").click(function(){
currentPage++;
addDataToTable();
});
}
/*处理上一页与下一页的显示*/
function paginationShow(){
if(currentPage ==1){
upPageButton.attr('disabled',true);
}else{
upPageButton.attr('disabled',false);
}
// alert(totalPage);
// alert(currentPage);
if(totalPage == currentPage){
downPageButton.attr('disabled',true);
}else{
downPageButton.attr('disabled',false);
}
}
}
C、为使用jquery生成的分页组件添加默认的样式
.divTableHeadTitle{
font-size: 20px;
text-align: center;
width:100%;
margin: 0px;
}
.operationDiv{
width: 100%;
margin: 0px;
height: 40px;
}
.addDataTableContainer{
margin: 0px;
padding: 0px;
width: 100%;
border: 1px;
text-align:left;
}
.addDataTableContainer .tableCellTitle{
color: gray;
font-size: 14px;
height: 50px;
}
.tableContext{
font-size: 15px;
height: 30px;
}
#upPageInput #upPageInput{
border: 1px;
border-color: gray;
}
D、运行结果截图
