jquery写的一个分页grid（非jqGrid插件）

最新推荐文章于 2022-01-27 10:54:29 发布

未子涵

最新推荐文章于 2022-01-27 10:54:29 发布

阅读量324

点赞数

本文链接：https://blog.csdn.net/lovelease/article/details/70155646

版权

自己写的一个带有删除和修改功能的分页grid，导航栏是动态生成的，可以自己设定每页显示多少条记录，以及导航栏一次最多显示n页，点击【次へ】显示接下来的n页。因为是纯jquery手写的（不是用开源插件），写的不算好，但还是在这里做个备份吧

jsp：


<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>用户列表</title>
    <link rel="stylesheet" type="text/css" href="../css/usermgr/userlist.css">
	<script language="JavaScript" type="text/javascript" src="../js/jquery/jquery-1.8.0.js"></script>
	<script language="JavaScript" type="text/javascript" src="../js/common/common.js"></script>
	<script language="JavaScript" type="text/javascript" src="../js/usermgr/userlist.js"></script>
	
	<style type="text/css"> 

	</style>
	</head>
	<body>
	<% int totalPage = Integer.parseInt((String)request.getAttribute("totalPage"));
	   int curPage = Integer.parseInt((String)request.getAttribute("pageIndex"));
	   int displayNum = Integer.parseInt((String)request.getAttribute("displayNumForPageNavi"));
	   // 以下のstartIndexとendIndexの計算ロジックはuserlist.jsでのstartIndexとendIndexの計算ロジックと同様です
	   int startIndex = curPage % displayNum == 0 ? (curPage - displayNum + 1) : (curPage / displayNum) * displayNum + 1;
	   int endIndex = totalPage >= displayNum ? (displayNum + startIndex <= totalPage ? displayNum + startIndex : totalPage + 1) : totalPage + 1;
	   %>
	<input type="hidden" id="hidden_displayNum" value="<s:property value="displayNumForPageNavi"/>">
	<br><br><br><br><br>
	<center>
		<table>
			<tr>
				<td>
					<div id="pageNaviDiv">
						<table id="pageNavi">
							<tr>
								<td><label>Page:</label></td>
								<td><label id="curPage"><s:property value="pageIndex"/></label></td><td>/</td><td><label id="allPage"><%=totalPage %></label></td>
								<td><a href="javascript:void(0)" id="first">最前</a></td>
								<td><a href="javascript:void(0)" id="prev">前へ</a></td>
								<% for (int i = startIndex; i < endIndex; i ++) { 
									if (i == startIndex) {%>
									<td><a href="javascript:void(0)" class="page" id="firstNavi"><%=i %></a></td>
								<%	} else if (i != startIndex && i == endIndex - 1) {%>
									<td><a href="javascript:void(0)" class="page" id="lastNavi"><%=i %></a></td>
								<%	} else {%>
								<td><a href="javascript:void(0)" class="page"><%=i %></a></td>
								<%	} %>
								<% } %>
								<td><a href="javascript:void(0)" id="next">次へ</a></td>
								<td><a href="javascript:void(0)" id="end">最後</a></td>
								<td><input id="jumpToPage" type="text" style="width:26px;height:16px;"></td>
							</tr>
						</table>
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<div>
						<table id="contentTb">
							<tr id="contentTb_th">
								<th>用户ID</th>
								<th>姓名</th>
								<th>EMAIL地址</th>
								<th>密码</th>
								<th>createTransNo</th>
								<th>updateTransNo</th>
								<th>修正</th>
								<th>删除</th>
							</tr>
							<s:iterator value="userlist" id="list">
							<tr id="contentTb_tr_<s:property value="#list.userId"/>">
								<td><input id="userId<s:property value="#list.userId"/>" type="text" value="<s:property value="#list.userId"/>" style="width:5em;" readonly="readonly;"></td>
								<td><input id="nickname<s:property value="#list.userId"/>" class="input<s:property value="#list.userId"/>" type="text" value="<s:property value="#list.nickname"/>" style="width:8em;" readonly="readonly;"></td>
								<td><input id="email<s:property value="#list.userId"/>" class="input<s:property value="#list.userId"/>" type="text" value="<s:property value="#list.email"/>" style="width:15em;" readonly="readonly;"></td>
								<td><input id="password<s:property value="#list.userId"/>" class="input<s:property value="#list.userId"/>" type="text" value="<s:property value="#list.password"/>" style="width:15em;" readonly="readonly;"></td>
								<td><input id="createTransNo<s:property value="#list.userId"/>" class="input<s:property value="#list.userId"/>" type="text" value="<s:property value="#list.createTransNo"/>" style="width:9em;" readonly="readonly;"></td>
								<td><input id="updateTransNo<s:property value="#list.userId"/>" class="input<s:property value="#list.userId"/>" type="text" value="<s:property value="#list.updateTransNo"/>" style="width:9em;" readonly="readonly;"></td>
								<td>
									<a id="change<s:property value="#list.userId"/>" href="javascript:void(0)" οnclick="change(<s:property value="#list.userId"/>)">修正</a>
									<a id="submit<s:property value="#list.userId"/>" href="javascript:void(0)" style="display:none;" οnclick="submit(<s:property value="#list.userId"/>)">確認</a>
								</td>
								<td><a id="delete<s:property value="#list.userId"/>" href="javascript:void(0)" οnclick="deleteFunction(<s:property value="#list.userId"/>)">削除</a></td>
							</tr>
							</s:iterator>
						</table>
					</div>
				</td>
			</tr>
		</table>
	</center>
	
<br>
<br>
<br>
<br>
<br>
  <center><table id="testRemote"><tr><td/></tr></table></center>
  <center><div id="pager" style="height:4em;"></div></center>
  <button id="aa">test</button>
  </body>
</html>

js：

$(document).ready(function() {
	$("#aa").button();
	// init css control function
	styleFunc();
	
	// clickToPage event
	$(".page").click(clickToPage);
	
	function clickToPage() {
		var pageInfo = "pageIndex=" + $.trim($(this).text());
		var options = {
				url:'clickToPage.html',
				type:'POST',
				dataType:'json',
				data:pageInfo,
				success: clickToPageResponse,
				error: function(){
					alert("サーバーでエラーが発生しました");
				}
			};
		$.ajax(options);
	}
	
	/** clickToPage Response function */
	// $(document).ready(function(){});外部のdeleteFunctionResponseもコールできる為、clickToPageResponseをグローバル関数にする
	window.clickToPageResponse = function(data) {
		/** ======================== refresh page navi START ========================== */
		// id=jumpToPageの<input>のwidthとheightを取得する
		var jumpToPageWidth = $("#jumpToPage").css("width");
		var jumpToPageHeight = $("#jumpToPage").css("height");
		// IEはFF、chromeと違う為、ブラウザーを判断し、widthとheightを処理する
		if($.browser.msie) {
			jumpToPageWidth = parseInt(jumpToPageWidth.substring(0,2)) + 6;
			jumpToPageHeight = parseInt(jumpToPageHeight.substring(0,2)) + 6;
		}else if($.browser.opera) {
			
		}else if($.browser.mozilla) {
			
		}else if($.browser.safari) {
			
		}else {  
			
		}
		
		$("#pageNavi").empty();
		// count of all record
		var allCount = data.allCount;
		// record count of per page
		var countOfPerPage = data.countOfPerPage;
		// ページナビで表示するリンクの数
		var displayNum = data.displayNumForPageNavi;
		// total number of page
		var totalPage = data.totalPage;
		
		var naviHtml = "";
		if (allCount != 0) {
			// current page
			var curPage = data.pageIndex;
			naviHtml += "<tr><td><label>Page:</label></td>"
					 + "<td><label id='curPage'>" + curPage + "</label></td>"
					 + "<td>/</td>"
					 + "<td><label id='allPage'>" + totalPage + "</label></td>"
					 + "<td><a href='javascript:void(0)' id='first'>最前</a></td>"
					 + "<td><a href='javascript:void(0)' id='prev'>前へ</a></td>";
			// 以下のstartIndexとendIndexの計算ロジックはuserlist.jspでのstartIndexとendIndexの計算ロジックと同様です
			// startIndex:1,11,21,...
			var startIndex = curPage % displayNum == 0 ? (curPage - displayNum + 1) : Math.floor(curPage / displayNum) * displayNum + 1;
			var endIndex = totalPage >= displayNum ? (displayNum + startIndex <= totalPage ? displayNum + startIndex : totalPage + 1) : totalPage + 1;
			for (var i = startIndex; i < endIndex; i ++) {
				if(i == startIndex) {
					naviHtml += "<td><a href='javascript:void(0)' class='page' id='firstNavi'>" + i + "</a></td>";
				} else if(i != startIndex && i == endIndex - 1) {
					naviHtml += "<td><a href='javascript:void(0)' class='page' id='lastNavi'>" + i + "</a></td>";
				} else {
					naviHtml += "<td><a href='javascript:void(0)' class='page'>" + i + "</a></td>";
				}
			}
			
			naviHtml += "<td><a href='javascript:void(0)' id='next'>次へ</a></td>"
					 + "<td><a href='javascript:void(0)' id='end'>最後</a></td>"
					 + "<td><input id='jumpToPage' type='text' style='width:" + jumpToPageWidth + ";height:" + jumpToPageHeight + ";'></td></tr>";
		}
		$("#pageNavi").append(naviHtml);
		// ページナビをリフレッシュした後ページリンクにclickToPage関数を付ける
		$(".page").click(clickToPage);
		// ページナビをリフレッシュした後「前へ」イベントを付ける
		$("#prev").click(previous);
		// id=nextの<a>がある場合
		if (totalPage != 1 && totalPage != 0) {
			// ページナビをリフレッシュした後「次へ」イベントを付ける
			$("#next").click(next);
		}
		// ページナビをリフレッシュした後「最前」イベントを付ける
		$("#first").click(first);
		// ページナビをリフレッシュした後「最後」イベントを付ける
		$("#end").click(end);
		// ページナビをリフレッシュした後「page jump」enterイベントを付ける
		$("#jumpToPage").keydown(jumpToPage);
		
		/** ======================== refresh page navi END ========================== */
		
		/** ======================== refresh userInfo table START ========================== */
		var htmlStr = "<tr id='contentTb_th'>";
		// ループして<th>を生成する
		$.each($("#contentTb_th th"), function() {
			htmlStr += "<th>" + $(this).text() + "</th>";
		});
		// <tr>を閉じる
		htmlStr += "</tr>";
		
		$("#contentTb").empty();
		
		// ユーザーリストを取得する
		var userlist = data.userlist;
		// ループ（i：インデックス；n：内容）
		$.each(userlist, function(i, n){
			htmlStr += "<tr id='contentTb_tr_" + n.userId + "'>"
					 + "	<td><input id='userId" + n.userId + "' type='text' value='" + n.userId + "' style='width:5em;' readonly='readonly'></td>"
					 + "	<td><input id='nickname" + n.userId + "' class='input" + n.userId + "' type='text' value='" + n.nickname + "' style='width:8em;' readonly='readonly'></td>"
					 + "	<td><input id='email" + n.userId + "' class='input" + n.userId + "' type='text' value='" + n.email + "' style='width:15em;' readonly='readonly'></td>"
					 + "	<td><input id='password" + n.userId + "' class='input" + n.userId + "' type='text' value='" + n.password + "' style='width:15em;' readonly='readonly'></td>"
					 + "	<td><input id='createTransNo" + n.userId + "' class='input" + n.userId + "' type='text' value='" + n.createTransNo + "' style='width:9em;' readonly='readonly'></td>"
					 + "	<td><input id='updateTransNo" + n.userId + "' class='input" + n.userId + "' type='text' value='" + n.updateTransNo + "' style='width:9em;' readonly='readonly'></td>"
					 + "	<td>"
					 + "		<a id='change" + n.userId + "' href='javascript:void(0)' οnclick='change(" + n.userId + ")'>修正</a>"
					 + "		<a id='submit" + n.userId + "' href='javascript:void(0)' style='display:none;' οnclick='submit(" + n.userId + ")'>確認</a>"
					 + "	</td>"
					 + "	<td><a id='delete" + n.userId + "' href='javascript:void(0)' οnclick='deleteFunction(" + n.userId + ")'>削除</a></td>"
					 + "</tr>";
			});
		$("#contentTb").append(htmlStr);
		/** ======================== refresh userInfo table END ========================== */
		// init css control function
		styleFunc();
	};
	
	/** 次へイベント */
	$("#next").click(next);
	// 次へイベントロジックは基本的に今ナビで表示してる最後のページの次のページのclickToPageイベントの再発行
	function next() {
		// totalPage
		var totalPage = $("#allPage").text();
		// jspから取得したページナビで表示するリンクの数
		var displayNum = $("#hidden_displayNum").val();
		// 今ナビで表示してる最前のページ
		var firstNavi = parseInt($.trim($("#firstNavi").text()));
		// id=lastNaviの<a>は必ず存在してる場合
		if (firstNavi != totalPage && displayNum > 1) {
			// 今ナビで表示してる最後のページ
			var lastNavi = parseInt($.trim($("#lastNavi").text()));
			if (lastNavi < totalPage) {
				// pageIndexはlastNaviの次のページ
				var pageIndex = lastNavi + 1;
				var pageInfo = "pageIndex=" + pageIndex;
				var options = {
						url:'clickToPage.html',
						type:'POST',
						dataType:'json',
						data:pageInfo,
						success: clickToPageResponse,
						error: function(){
							alert("サーバーでエラーが発生しました");
						}
					};
				$.ajax(options);
			} else {
				alert("当前ページは最後です");
			}
		// この場合はnextページを表示する動作と同様
		} else if (displayNum = 1) {
			if (firstNavi < totalPage) {
				var pageIndex = firstNavi + 1;
				var pageInfo = "pageIndex=" + pageIndex;
				var options = {
						url:'clickToPage.html',
						type:'POST',
						dataType:'json',
						data:pageInfo,
						success: clickToPageResponse,
						error: function(){
							alert("サーバーでエラーが発生しました");
						}
					};
				$.ajax(options);
			} else {
				alert("当前ページは最後です");
			}
		} else {
			alert("当前ページは最後です");
		}
	}
	
	/** 前へイベント */
	$("#prev").click(previous);
	function previous() {
		// 今ナビで表示してる最前のページ
		var firstNavi = parseInt($.trim($("#firstNavi").text()));
		// totalPage:jspから取得する
		var totalPage = $("#allPage").text();
		// jspから取得したページナビで表示するリンクの数
		var displayNum = $("#hidden_displayNum").val();
		if (firstNavi != 1) {
			// pageIndexはfirstNaviの前displayNumページ
			var pageIndex = firstNavi - displayNum;
			var pageInfo = "pageIndex=" + pageIndex;
			var options = {
					url:'clickToPage.html',
					type:'POST',
					dataType:'json',
					data:pageInfo,
					success: clickToPageResponse,
					error: function(){
						alert("サーバーでエラーが発生しました");
					}
				};
			$.ajax(options);
		} else {
			alert("当前ページは最前です");
		}
	}
	
	/** 最前イベント */
	$("#first").click(first);
	function first() {
		// curPage:jspから取得する
		var curPage = $("#curPage").text();
		if (curPage <= 1) {
			alert("当前ページは最前です");
			return ;
		}
		var pageIndex = 1;
		var pageInfo = "pageIndex=" + pageIndex;
		var options = {
				url:'clickToPage.html',
				type:'POST',
				dataType:'json',
				data:pageInfo,
				success: clickToPageResponse,
				error: function(){
					alert("サーバーでエラーが発生しました");
				}
			};
		$.ajax(options);
	}
	
	/** 最後イベント */
	$("#end").click(end);
	function end() {
		// totalPage:jspから取得する
		var totalPage = $("#allPage").text();
		// curPage:jspから取得する
		var curPage = $("#curPage").text();
		if (curPage == totalPage) {
			alert("当前ページは最後です");
			return ;
		}
		var pageIndex = totalPage;
		var pageInfo = "pageIndex=" + pageIndex;
		var options = {
				url:'clickToPage.html',
				type:'POST',
				dataType:'json',
				data:pageInfo,
				success: clickToPageResponse,
				error: function(){
					alert("サーバーでエラーが発生しました");
				}
			};
		$.ajax(options);
	}
	
	/** page jump enter イベント */
	$("#jumpToPage").keydown(jumpToPage);
	function jumpToPage(e) {
		var curKey = e.which;
		if (curKey == 13) {
			// totalPage:jspから取得する
			var totalPage = $("#allPage").text();
			var pageIndex = $(this).val();
			// regular expression of integer
			var reg=/^[-+]?\d+$/;
			if (!reg.test(pageIndex)) {
				$(this).val("");
				alert("正しいページナンバーを入力してください");
				return;
			}
			if (pageIndex <= totalPage) {
				var pageInfo = "pageIndex=" + pageIndex;
				var options = {
						url:'clickToPage.html',
						type:'POST',
						dataType:'json',
						data:pageInfo,
						success: clickToPageResponse,
						error: function(){
							alert("サーバーでエラーが発生しました");
						}
					};
				$.ajax(options);
			} else {
				$(this).val("");
				alert("ページ上限を超えました");
			}
			$("input[id='searchChtoEn']").click();
			return false;
		}
	}
	
	/** ============================FUNCTIONS FOR CSS STYLE START ============================================= */
	function styleFunc() {
		$("#first").mouseover(function() {
			$(this).addClass("mouseOverStyle");
		});
		$("#first").mouseout(function() {
			$(this).removeClass("mouseOverStyle");
		});
		$("#prev").mouseover(function() {
			$(this).addClass("mouseOverStyle");
			
			var displayNum = $("#hidden_displayNum").val();
			var hintStr = "前の" + displayNum + "ページ";
			$(this).attr("title",hintStr);
		});
		$("#prev").mouseout(function() {
			$(this).removeClass("mouseOverStyle");
		});
		$("#next").mouseover(function() {
			$(this).addClass("mouseOverStyle");
			
			var displayNum = $("#hidden_displayNum").val();
			var hintStr = "次の" + displayNum + "ページ";
			$(this).attr("title",hintStr);
		});
		$("#next").mouseout(function() {
			$(this).removeClass("mouseOverStyle");
		});
		$("#end").mouseover(function() {
			$(this).addClass("mouseOverStyle");
		});
		$("#end").mouseout(function() {
			$(this).removeClass("mouseOverStyle");
		});
		$(".page").mouseover(function() {
			$(this).css("background","#0073EA");
		});
		$(".page").mouseout(function() {
			// curPage:jspから取得する
			var curPage = $("#curPage").text();
			var pageIndex = $(this).text();
			if (pageIndex == curPage) {
				$(this).css("background","black");
			} else {
				$(this).css("background","#5A5A5A");
			}
		});
		$("a[id^='change']").mouseover(function() {
			$(this).css("background","#0073EA");
		});
		$("a[id^='change']").mouseout(function() {
			$(this).css("background","#5A5A5A");
		});
		$("a[id^='submit']").mouseover(function() {
			$(this).css("background","#0073EA");
		});
		$("a[id^='submit']").mouseout(function() {
			$(this).css("background","#5A5A5A");
		});
		$("a[id^='delete']").mouseover(function() {
			$(this).css("background","#0073EA");
		});
		$("a[id^='delete']").mouseout(function() {
			$(this).css("background","#5A5A5A");
		});
		
		// delete the dotted line after <a> is clicked
		$("#pageNavi a").focus(function() {
			this.blur();
		});
		$("#contentTb a").focus(function() {
			this.blur();
		});
		
		$("#jumpToPage").attr("title","Enterキーでジャンプ");
		
		// 一覧テーブルの偶数行のbackgroundを設定する
		$("#contentTb tr:even").css("background","#EEEEF0");
		$("#contentTb tr:even td input").css("background","#EEEEF0");
		
		// line highlight after mouse over
		$("#contentTb tr[id != contentTb_th]").mouseover(function() {
			var trId = $(this).attr("id");
			$("#" + trId + " td input").css("background","#D0D1D1");
			
			$(this).css("background","#D0D1D1");
		});
		$("#contentTb tr[id != contentTb_th]").mouseout(function() {
			var trId = $(this).attr("id");
			var id = trId.substring(13);
			// 当前行のインデックスを取得する
			var index = $("#contentTb tr").index(this);
			if (index % 2 != 0) {
				$("input[id*=" + id + "]").css("background","white");
				$(this).css("background","white");
			} else {
				$("input[id*=" + id + "]").css("background","#EEEEF0");
				$(this).css("background","#EEEEF0");
			}
		});
		
		// add fadeIn effect
		$("#contentTb tr[id ^= contentTb_tr_]").css("display","none");
		$("#contentTb tr[id ^= contentTb_tr_]").fadeIn("normal");
		
		$("#contentTb tr td input").mouseover(function() {
			$(this).attr("title",$(this).val());
		});
		
		// 当前ページのハイライト表示
		// curPage:jspから取得する
		var curPage = $("#curPage").text();
		$.each($(".page"), function() {
			var pageIndex = $(this).text();
			if (pageIndex == curPage) {
				$(this).css("background","black");
			}
		});
	}
	/** ============================FUNCTIONS FOR CSS STYLE END =============================================== */
});

/** 修正イベント */
function change(id) {
	$("#change" + id).toggle();
	$("#submit" + id).css("display","block");
	
	$(".input" + id).removeAttr("readonly");
	$(".input" + id).css("border","solid #0073EA 1px");
}

/** 確認イベント */
function submit(id) {
	var userInfo = "userId=" + $('#userId' + id).val() 
					+ "&nickname=" + $('#nickname' + id).val() 
					+ "&email=" + $('#email' + id).val() 
					+ "&password=" + $('#password' + id).val() 
					+ "&createTransNo=" + $('#createTransNo' + id).val() 
					+ "&updateTransNo=" + $('#updateTransNo' + id).val();

	var options = {
			url:'update.html',
			type:'POST',
			dataType:'json',
			data:userInfo,
			success: updateResponse,
			error: function(){
				alert("サーバーで異常が発生しました");
			}
		};
	$.ajax(options);
}

//確認イベントのレスポンス関数
function updateResponse(result) {
	var id = result.userId;
	$("#submit" + id).toggle();
	$("#change" + id).css("display","block");
	
	if (result.updRst == 1) {
		$(".input" + id).attr("readonly","readonly");
		$(".input" + id).css("border","solid 0px");
	} else {
		alert("更新失敗しました");
	}
}

/** 削除イベント */
function deleteFunction(id) {
	var hintStr = "userId=" + $('#userId' + id).val() + "のレコードを削除しますか？";
	if (confirm(hintStr)) {
		var userInfo = "userId=" + $('#userId' + id).val() 
		+ "&nickname=" + $('#nickname' + id).val() 
		+ "&email=" + $('#email' + id).val() 
		+ "&password=" + $('#password' + id).val() 
		+ "&createTransNo=" + $('#createTransNo' + id).val() 
		+ "&updateTransNo=" + $('#updateTransNo' + id).val();

		var options = {
				url:'delete.html',
				type:'POST',
				dataType:'json',
				data:userInfo,
				success: deleteFunctionResponse,
				error: function(){
					alert("サーバーで異常が発生した為、削除失敗しました");
				}
		};
		$.ajax(options);
	}
}

//削除イベントのレスポンス関数
function deleteFunctionResponse(result) {
	if (result.delRst == 1) {
		// jspからcurrent pageを取得する
		var pageIndex = $("#curPage").text();
		// jspからtotal pageを取得する
		var totalPage = $("#allPage").text();
		// 当前ページで表示してるレコードの数
		var trNum = $("tr[id^='contentTb_tr_']").length;
		// 当前ページでレコードが１件しか表示してない場合、このレコードの削除を成功した後、前の１ページをpageIndexとして再検索する
		if (totalPage != 1 && pageIndex == totalPage && trNum == 1) {
			pageIndex -= 1;
		// レコードは全部１件しかない場合、このレコードの削除を成功した後、テーブルを空にする
		} else if (totalPage == 1 && pageIndex == totalPage && trNum == 1){
			$("tr[id^='contentTb_tr_']").empty();
			return;
		}
		var pageInfo = "pageIndex=" + pageIndex;
		var options = {
				url:'clickToPage.html',
				type:'POST',
				dataType:'json',
				data:pageInfo,
				success: clickToPageResponse,
				error: function(){
					alert("サーバーでエラーが発生しました");
				}
			};
		$.ajax(options);
	} else {
		alert("削除失敗しました");
	}
}

action：


public class UserPageSearchAction extends BaseAction {

	/** */
	private static final long serialVersionUID = -6960892723912036191L;
	private UserService userService;
	private List<User> userlist;
	private int pageIndex;
	private int countOfPerPage = Constants.COUNT_OF_PERPAGE;
	private int allCount;
	private int totalPage;
	// ページナビで表示するリンクの数
	private int displayNumForPageNavi = Constants.DISP_NUM_FOR_PAGE_NAVI;
	
	/**
	 * @return the userRegisterService
	 */
	
	//从服务器取得list信息，供一览画面使用
	/**
	 * @return the userlist
	 */
	public List<User> getUserlist() {
		return userlist;
	}
	/**
	 * @param userlist the userlist to set
	 */
	public void setUserlist( List<User> userlist ) {
		this.userlist = userlist;
	}
	

	@Override
	protected String executeProcess() throws Exception {
		// TODO Auto-generated method stub
		List<User> allUser =  userService.getAllUser();
		List<User> tmpUserList = new ArrayList<User>();
		if(!allUser.isEmpty()){
			allCount = allUser.size();
//			countOfPerPage = Constants.COUNT_OF_PERPAGE;
			totalPage = allCount <= countOfPerPage ? 1 : (allCount % countOfPerPage == 0 ? allCount / countOfPerPage : allCount / countOfPerPage + 1);
			
			int startIndex = pageIndex > 1 ? (pageIndex - 1) * countOfPerPage : 0;
			
			int length = allCount <= countOfPerPage ? allCount : ((allCount - startIndex) < countOfPerPage ? allCount - startIndex : countOfPerPage);
			
			for (int i = startIndex; i < startIndex + length; i ++) {
				tmpUserList.add(allUser.get(i));
			}
			
			HttpServletRequest req = getRequest();
			
			userlist = tmpUserList;

			// 如果是通过struts方式直接进入该action的，则设置pageIndex为1（此时肯定是第一页）
			if (pageIndex == 0) {
				pageIndex = 1;
			}
			// pageIndexをJSPページのjavaソースに使える為、リクエストにセットする
			req.setAttribute("pageIndex", String.valueOf(pageIndex));
			// totalPageをJSPページのjavaソースに使える為、リクエストにセットする
			req.setAttribute("totalPage", String.valueOf(totalPage));
			// displayNumForPageNaviをJSPページのjavaソースに使える為、リクエストにセットする
			req.setAttribute("displayNumForPageNavi", String.valueOf(displayNumForPageNavi));
			
			return SUCCESS;
		}else{
//			return SUCCESS;
			return "failure";
		}
		
	}
	

}

查看图片附件

未子涵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery写的一个分页grid（非jqGrid插件）

自己写的一个带有删除和修改功能的分页grid，导航栏是动态生成的，可以自己设定每页显示多少条记录，以及导航栏一次最多显示n页，点击【次へ】显示接下来的n页。因为是纯jquery手写的（不是用开源插件），写的不算好，但还是在这里做个备份吧jsp：用户列表 <% int totalPag
复制链接

扫一扫