Add: navigate page

src/web/module/maestro_section_main.html

@@ -64,6 +64,10 @@
 	background-color: #ddddff;
 }
 
+#player_list_navigator {
+	text-align: center;
+}
+
 </style>
 
 
@@ -71,6 +75,7 @@
 <script>
 
 let maestroID = -1;
+let playerCount = 0;
 
 $(document).ready(function() {
 	maestroID = sessionStorage.getItem("maestroID");
@@ -113,14 +118,32 @@ function loadPlayerList() {
 
 			let playerCount = replyJSON["Count"];
 			console.log("registered player count : " + playerCount);
-			loadPlayerListPage(playerCount, 1);
+			loadPlayerListPage(1);
 		}
 	}
 }
 
-function loadPlayerListPage(playerCount, pageNo) {
-	let startNo = 0;
-	let endNo = 9;
+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 loadPlayerListPage(pageNo) {
+	let pageIndex = pageNo - 1;
+	let startNo = pageIndex * 10;
+	let endNo = pageIndex * 10 + 9;
 
 	let xhr = new XMLHttpRequest(); //new로 생성.
 	xhr.open('POST', './../server/user/registered_player_list_page.php', true);
@@ -159,7 +182,18 @@ function loadPlayerListPage(playerCount, pageNo) {
 	}
 }
 
+function addPlayerListTitle() {
+	$("#registered_player_list").empty();
+
+	$("#registered_player_list").append(
+		'<li class="registered_player_list_name">이름</li><li class="registered_player_list_entercode">입장 코드</li>'
+	);
+}
+
 function updatePlayerListPage(playerList) {
+	$("#registered_player_list").empty();
+	addPlayerListTitle();
+
 	for(let i = 0; i < playerList.length; i++) {
 		$("#registered_player_list").append(
 			"<li>"
@@ -253,6 +287,7 @@ function addPlayer() {
 			}
 
 			console.log("update player list");
+			loadPlayerListPage(1);
 		}
 	}
 
@@ -313,14 +348,15 @@ function addPlayer() {
 			목록
 			<div id="player_list_result_contents">
 				<ul id="registered_player_list">
-					<li class="registered_player_list_name">
-						이름
-					</li>
-					<li class="registered_player_list_entercode">
-						입장 코드
-					</li>
 				</ul>
 			</div>
+
+			<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('last')"> >> </a></span>
+			</div>
 		</span>
 	</div>