fix: navigate page

src/web/module/maestro_section_main.html

@@ -30,7 +30,7 @@
 #player_list_result {
 	float: right;
 	line-height: 2em;
-	width: 500px;
+	width: 600px;
 	padding: 10px;
 	background-color: #ffaaaa;
 }
@@ -68,6 +68,10 @@
 	text-align: center;
 }
 
+#player_list_navigator a {
+	cursor: pointer;
+}
+
 </style>
 
 
@@ -76,6 +80,9 @@
 
 let maestroID = -1;
 let playerCount = 0;
+let playerListPage = 0;
+let lastPageNo = 0;
+
 
 $(document).ready(function() {
 	maestroID = sessionStorage.getItem("maestroID");
@@ -116,35 +123,62 @@ function loadPlayerList() {
 				return;
 			}
 
-			let playerCount = replyJSON["Count"];
+			playerCount = replyJSON["Count"];
+			lastPageNo = Math.floor( (playerCount + 1) / 10 );
+
 			console.log("registered player count : " + playerCount);
 			loadPlayerListPage(1);
+			addPlayerListPages();
 		}
 	}
 }
 
-function onClickPlayerListPage(targetPage) {
-	switch(targetPage) {
-		case "first":
-		loadPlayerListPage(1);
-		break;
-		case "prev":
-		loadPlayerListPage(1);
-		break;
-		case "next":
-		loadPlayerListPage(1);
-		break;
-		case "last":
-		loadPlayerListPage(6);
-		break;
+function addPlayerListPages() {
+	$("#player_list_pages").empty();
+
+	for(let pageNo = 1; pageNo < lastPageNo + 1; pageNo++) {
+		$("#player_list_pages").append(
+			"<a onClick='onClickPlayerListPage(" + pageNo + ")'> " + pageNo + " </a>"
+		);
 	}
 }
 
+function onClickPlayerListPage(pageNo) {
+	console.log(pageNo);
+
+	switch(pageNo) {
+		case "first":
+		playerListPage = 1;
+		loadPlayerListPage(playerListPage);
+		return;
+		case "prev":
+		if(playerListPage > 1)
+			playerListPage -= 1;
+
+		loadPlayerListPage(playerListPage);
+		return;
+		case "next":
+		if(playerListPage < lastPageNo)
+			playerListPage += 1;
+
+		loadPlayerListPage(playerListPage);
+		return;
+		case "last":
+		loadPlayerListPage(lastPageNo);
+		return;
+	}
+
+	loadPlayerListPage(pageNo);
+}
+
 function loadPlayerListPage(pageNo) {
 	let pageIndex = pageNo - 1;
 	let startNo = pageIndex * 10;
 	let endNo = pageIndex * 10 + 9;
 
+	console.log("startNo : " + startNo);
+	console.log("endNo : " + endNo);
+
 	let xhr = new XMLHttpRequest(); //new로 생성.
 	xhr.open('POST', './../server/user/registered_player_list_page.php', true);
 	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
@@ -197,6 +231,7 @@ function updatePlayerListPage(playerList) {
 	for(let i = 0; i < playerList.length; i++) {
 		$("#registered_player_list").append(
 			"<li>"
+			+ "" + playerList[i]["UserID"] + ""
 			+ "<input type='text' value='" + playerList[i]["Name"] + "' class='registered_player_list_name'>"
 			+ "<input type='text' value='" + playerList[i]["EnterCode"] + "' class='registered_player_list_entercode'>"
 			+ "<input type='button' value='수정'>"
@@ -353,8 +388,9 @@ function addPlayer() {
 
 			<div id="player_list_navigator">
 				<span><a onClick="onClickPlayerListPage('first')"> << </a></span>
-				<span><a onClick="onClickPlayerListPage('first')"> < </a></span>
-				<span><a onClick="onClickPlayerListPage('last')"> > </a></span>
+				<span><a onClick="onClickPlayerListPage('prev')"> < </a></span>
+				<span id="player_list_pages"></span>
+				<span><a onClick="onClickPlayerListPage('next')"> > </a></span>
 				<span><a onClick="onClickPlayerListPage('last')"> >> </a></span>
 			</div>
 		</span>