jQuery分页

jsp部分

table的class=pagingTable，ul的div的class=paging，这些都要用于jQuery识别元素。

									<tr class="text-center">
										<th class="text-center">产品编号</th>
										<th class="text-center">产品名称</th>
										<th class="text-center">产品关系码</th>
										<th class="text-center">操作</th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
						</div>
						<div class="paging">
						
						<ul class="pagination">
							<li><a href="#">首页</a></li>
							<li><a href="#">&laquo;</a></li>
							
							<li><a href="#">&raquo;</a></li>
							<li><a href="#">尾页</a></li>
						</ul>
						</div>

					</div>

jQuery部分

<div>
							<!-- 定义表格框架 -->
							<table id="productTable" class="pagingTable">
								<thead>
									<tr class="text-center">
										<th class="text-center">产品编号</th>
										<th class="text-center">产品名称</th>
										<th class="text-center">产品关系码</th>
										<th class="text-center">操作</th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
						</div>
						<div class="paging">
						
						<ul class="pagination">
							<li><a href="#">首页</a></li>
							<li><a href="#">&laquo;</a></li>
							
							<li><a href="#">&raquo;</a></li>
							<li><a href="#">尾页</a></li>
						</ul>
						</div>

					</div>

jQuery部分

<script type="text/javascript">
	$(function() {
//初始化页面数据
		paging(1, 10);
		/*分页功能*/
		function paging(pageNow, pageSize) {
			//将参数转换为数字
			var pageNow = parseInt(pageNow);
			var pageSize = parseInt(pageSize);

			$.ajax({
				url : '${pageContext.request.contextPath}/TankManageServlet',
				type : 'post',
				dataType : 'json',
				//后台传入搜索数据,以及页码数据
				data : {
					productId : $("#productId").val(),
					productName : $("#productName").val(),
					relationId : $("#relationId").val(),
					pageNow : pageNow,
					pageSize : pageSize,
				},
				async : true,
				success : function(data) {
					var pageCount = parseInt(data.pageCount);

					//生成分页左部分
					getPageLeft(pageSize, pageNow);
					//加载页码
					getPage(pageSize, pageNow, pageCount);
					//生成分页右部分
					getPageRight(pageSize, pageNow, pageCount);

					var tb = $(".pagingTable tbody");
					//加载当前页码数据
					getJsonList(tb, data.jsonList);

				},
				error : function() {
					alert("数据加载失败！");
				}

			});

		}

		/*动态加载分页的左半部分*/
		function getPageLeft(pageSize, pageNow) {
			var page = $(".paging ul");
			page.empty();
			//生成pageSize，并添加触发事件
			page.append("<li><a href='#'>显示<select id='pageSize'><option>2</option><option>10</option><option>15</option><option>20</option></select>条</a></li>");
			$("#pageSize").val(pageSize);
			$("#pageSize").change(function() {
				paging(1, $("#pageSize").val());
			});
			//生成首页，并添加点击事件
			page.append("<li><a id='first' href='#'>首页</a></li>");
			$("#first").click(function() {
				paging(1, pageSize);
			});
			//生成上一页，并添加点击事件
			page.append("<li><a id='previous' href='#'>&laquo;</a></li>");
			$("#previous").click(function() {
				if (pageNow == 1) {
					return false;
				} else {
					paging(pageNow - 1, pageSize);
				}
			});
		}

		/*动态加载页码*/
		function getPage(pageSize, pageNow, pageCount) {
			var page = $(".paging ul");
			var pageNumber = 7;//显示页码条数
			var halfPageNumber = parseInt(pageNumber / 2);
			//生成页码
			if (pageCount <= pageNumber) {
				//动态生成页码
				for (var i = 1; i <= pageCount; i++) {
					page.append("<li><a class='number' href='#'>" + i
							+ "</a></li>");
				}

			} else if (pageNow > pageCount - halfPageNumber) {
				for (var i = pageCount - (pageNumber - 1); i <= pageCount; i++) {
					page.append("<li><a class='number' href='#'>" + i
							+ "</a></li>");
				}

			} else if (pageNow <= halfPageNumber + 1) {
				for (var i = 1; i <= pageNumber; i++) {
					page.append("<li><a class='number' href='#'>" + i
							+ "</a></li>");
				}
			} else {
				//动态生成页码
				for (var i = pageNow - halfPageNumber; i <= pageNow
						+ halfPageNumber; i++) {
					page.append("<li><a class='number' href='#'>" + i
							+ "</a></li>");
				}
			}
			//向每个页码添加点击事件

			$($(".paging ul li .number")).each(function() {
				$(this).click(function() {
					paging($(this).text(), pageSize);
				});
			});

		}

		/*动态加载分页右半部分*/
		function getPageRight(pageSize, pageNow, pageCount) {
			var page = $(".paging ul");
			//生成下一页，并添加点击事件
			page.append("<li><a id='next' href='#'>&raquo;</a></li>");
			$("#next").click(function() {
				if (pageNow == pageCount) {
					return false;
				} else {
					paging(pageNow + 1, pageSize);
				}
			});
			//生成尾页，并添加点击事件
			page.append("<li><a id='last' href='#'>尾页</a></li>");
			$("#last").click(function() {
				paging(pageCount, pageSize);
			});
			//生成当前页码
			page
					.append("<li><a href='#'><span>第<input id='pageNow' style='width:30px;height:15px' value='"+pageNow+"'>/"
							+ pageCount + "页</span></a></li>");
			//输入框跳转界面
			$("#pageNow").change(function() {
				var pageNow = parseInt($(this).val());
				if (pageNow > 0 && pageNow <= pageCount) {
					paging(pageNow, pageSize);
				} else {
					alert("请输入正确的页码！");
				}
			});

		}

		/*	动态加载 json数组
		 *	tb:<tbody> 
		 *	jsonList:数据的json数组
		 */
		function getJsonList(tb, jsonList) {
			tb.empty();// 清空<tbody>
			if (jsonList && jsonList.length > 0) {

				// 遍历数组的每一个JSON
				$
						.each(
								jsonList,
								function(i, row) {
									var tr = $('<tr>');
									// 遍历JSON中的每一条数据
									$.each(row, function(name, value) {
										tr.append('<td>' + value + '</td>');
									});
									//添加删除按钮
									tr
											.append("<a class='btn btn-danger btn-xs' type='button'>删除</a>");

									tb.append(tr);
								});

				$(".pagingTable tbody tr").each(function() {
					var productId = $(this).children().eq(0).text();
					$(this).children().eq(3).click(function() {
						deleteProduct(productId);
					});
				});

			}
		}
		);
</script>

实现效果