투케이2K

55. (html/css/javascript/jquery) 부트스트랩 (bootstrap) 사용해 게시판 table 동적 목록 생성, pagination 페이징 처리 본문

FrontEnd

55. (html/css/javascript/jquery) 부트스트랩 (bootstrap) 사용해 게시판 table 동적 목록 생성, pagination 페이징 처리

투케이2K 2021. 7. 20. 13:25

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

[소스 코드]

​

<!DOCTYPE HTML>
<!-- 자바스크립트 차단된 콘텐츠 자동 허용 실시 -->
<!-- saved from url=(0013)about:internet -->

<!-- 표시 언어 지정 -->
<html lang="ko">

<!-- 헤더 정의 부분 -->
<head>
    <title>HTML TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  

    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->    
    <script src="https://code.jquery.com/jquery-latest.min.js"></script> 


    <!-- 부트스트랩 CDN 로드 : 항상 최신 버전 사용 : maxcdn -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>


    <!-- 부트스트랩 CDN 로드 : 항상 최신 버전 사용 : netdna -->
    <!-- <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> -->
    <!-- <script src="https://netdna.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script> -->

    

    <!-- 내부 CSS 스타일 지정 -->
    <style>			    			 	    	

		/* [html, body 영역 스타일 지정] */
		html, body{
			width : 100%;
			height : 100%;
			margin : 0;
			padding : 0;
			border : none;	
			overflow : auto;				
		}		
		
		/* [body 스크롤바 메인 스타일 지정] */
		body::-webkit-scrollbar {
			width: 10px;
			background-color: #c1c1c1;
		}
		/* body 스크롤바 thumb 스타일 지정 */
		body::-webkit-scrollbar-thumb {		
			background-color: #444444;
		}
		      				                          
    </style>



    <!-- 내부 JS 지정 -->
    <script>
    	
    	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	window.onload = function() {
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log(""); 

    		// 동적으로 테이블 tbody tr 행 생성 실시
    		tableInsert();
    	};




    	/* [테이블 리스트 전역 변수 선언 실시] */
    	const tableList = []; // tableInsert 함수에서 for문을 돌면서 삽입 실시
    	const pageList = 5; // 한개의 페이지에 보여질 목록 개수
    	const pageMax = 3; // 최대 생성될 페이지 개수 (페이지를 더보려면 이전, 다음 버튼 클릭해야함)    	
    	var idx = 0; //idx 값 확인 후 동적 페이지 전환 및 데이터 표시
    	var page = 1; //생성 시작할 페이지 번호




    	/* [tbody tr 동적 삽입 이벤트 수행 함수] */    	
    	function tableInsert(){
    		console.log("");
    		console.log("[tableInsert] : [start]"); 
    		console.log("");


    		// [ajax 통신 >> tableList 테이블 데이터가 리스트에 포함된 경우]
    		// pageInsert(page);

    		
    		// [for 반복문을 돌려서 tr 데이터 임의로 생성 실시]
    		for (var i=0; i<=30; i++){
    			// JSON 형식으로 리스트에 추가 실시
    			var jsonObject = {"idx":i, "name":String(i) + " 이름", "age":String(i) + " 나이"};
    			tableList.push(jsonObject);
    		}


    		// [테이블 리스트에 저장된 데이터 확인]
    		console.log("");
    		console.log("[tableInsert] : [list] : " + JSON.stringify(tableList)); 
    		console.log("");


    		// [테이블 행 개수에따라 페이징 처리 실시]
    		pageInsert(page);
    	};




    	/* [페이징 처리 이벤트 수행 함수] */
    	function pageInsert(value){
    		console.log("");
    		console.log("[pageInsert] : [start] : " + value); 
    		console.log("");


    		// [페이징 목록 초기화 실시]
    		$("#dyn_ul").empty();


    		// [생성된 테이블 tr 개수 확인 >> 페이징 처리 5개씩 목록 자름]    		
    		var startIndex = value; // 생성 시작 페이지    		
    		//var endIndex = $("#dyn_tbody tr").length; // tbody에 동적으로 추가된 tr 개수 확인
    		var endIndex = tableList.length; // 배열에 있는 길이 확인
    		console.log("");
    		console.log("[pageInsert] : [startIndex] : " + startIndex); 
    		console.log("[pageInsert] : [endIndex] : " + endIndex); 
    		console.log("");


    		// [tr 개수에 따라 페이징 해야할 개수 확인]
    		var pageCount = 0;
    		var pagePlus = 0;
    		if(endIndex > pageList){ // tr 행 개수가 5 이상인 경우 (임의로 설정)
    			pageCount = Math.floor(endIndex / pageList); //생성될 페이지 수 (소수점 버림)
    			pagePlus = endIndex % pageList; //추가 나머지 자식 수
    			if(pagePlus > 0){ //추가 자식수가 있는경우 >> 페이지 추가
    				pageCount = pageCount + 1;
    			}
    			console.log("");
	    		console.log("[pageInsert] : [pageCount] : " + pageCount); 
	    		console.log("[pageInsert] : [pagePlus] : " + pagePlus); 
	    		console.log("");
    		}


    		// [생성될 페이지 번호가 전체 생성되야하는 길이보다 크거나 작은지 확인]
    		if(startIndex > pageCount){ //길이 초과 시 기존꺼로 다시 저장
    			startIndex = page;
    		}
    		else if(startIndex < 0){ //길이 미만 시 기존꺼로 다시 저장
    			startIndex = page;
    		}
    		else {
    			page = startIndex;
    		}


    		// [동적 ul 페이징 처리 실시]
    		if(pageCount == 1){ //생성해야할 페이지가 1페이지인 경우
    			var insertUl = "<li class='page-item'>"; // 변수 선언
    			insertUl += insertUl + "<a class='page-link' href='javascript:void(0)' onclick = 'newPage(1);'>";
    			insertUl += insertUl + i;
    			insertUl += insertUl + "</a></li>";
    			$("#dyn_ul").append(insertUl); //jquery append 사용해 동적으로 추가 실시      			
    		}
    		else if(pageCount >= 2){ //생성해야할 페이지가 2페이지 이상인 경우
    			// 이전 페이지 추가 실시 
    			var insertSTR = "<li class='page-item'>"; // 변수 선언
    			insertSTR = insertSTR + "<a class='page-link' href='javascript:void(0)' onclick = 'newPage("+"-1"+");'>";
    			insertSTR = insertSTR + "Previous";
    			insertSTR = insertSTR + "</a></li>";
    			$("#dyn_ul").append(insertSTR); //jquery append 사용해 동적으로 추가 실시      			

    			// 특정 1, 2, 3 .. 페이지 추가 실시
    			var count = 1;
    			for(var i=startIndex; i<=pageCount; i++){
    				if(count > pageMax){ //최대로 생성될 페이지 개수가 된 경우 
    					page = i - pageMax; //생성된 페이지 초기값 저장 (초기 i값 4 탈출 인경우 >> 1값 저장)
    					break; //for 반복문 탈출
    				}
    				var insertUl = "<li class='page-item'>"; // 변수 선언
    				insertUl = insertUl + "<a class='page-link' href='javascript:void(0)' onclick = 'newPage("+i+");'>";
	    			insertUl = insertUl + String(i);
	    			insertUl = insertUl + "</a></li>";
    				$("#dyn_ul").append(insertUl); //jquery append 사용해 동적으로 추가 실시  
    				count ++;
    			}

    			// 다음 페이지 추가 실시
    			var insertEND = "<li class='page-item'>"; // 변수 선언
    			insertEND = insertEND + "<a class='page-link' href='javascript:void(0)' onclick = 'newPage("+"0"+");'>";
    			insertEND = insertEND + "Next";
    			insertEND = insertEND + "</a></li>";
    			$("#dyn_ul").append(insertEND); //jquery append 사용해 동적으로 추가 실시
    		}


    		// [페이징 완료 후 >> tr 개수 전체 삭제 >> 페이징 개수에 맞게 다시 표시 실시]
    		$("#dyn_tbody").empty(); //tbody tr 전체 삭제 실시


    		// [새롭게 페이지 목록 리스트 처리 실시]
    		newPage(startIndex);
    	};




    	/* [tbody tr 동적 삽입 이벤트 수행 함수] */    	
    	function newPage(pageCurrent){
    		// [pageCurrent [-1] >> 이전 / pageCurrent [1 이상] >> 일반 / pageCurrent [0] >> 다음]
    		console.log("");
    		console.log("[newPage] : [start]"); 
    		console.log("[newPage] : [page] : " + pageCurrent); 
    		console.log("");

    		// [새롭게 테이블 tbody tr 데이터 생성 실시]
    		if(pageCurrent == -1){ // 이전 페이지
    			$("#dyn_tbody").empty(); //tbody tr 전체 삭제 실시

    			// [새롭게 페이징 처리 실시]
    			var newIdx = page - pageMax;

    			// [테이블 데이터에 따라 페이징 처리 실시]
    			pageInsert(newIdx); //표시될 페이지 번호 전송
    		} 
    		else if(pageCurrent == 0){ // 다음 페이지
    			$("#dyn_tbody").empty(); //tbody tr 전체 삭제 실시

    			// [새롭게 페이징 처리 실시]
    			var newIdx = page + pageMax;

    			// [테이블 데이터에 따라 페이징 처리 실시]
    			pageInsert(newIdx); //표시될 페이지 번호 전송
    		}
    		else { // 일반 테이블 목록 리스트 갱신
    			$("#dyn_tbody").empty(); //tbody tr 전체 삭제 실시

    			// 저장된 idx 에서 페이지 수를 곱해서 새로운 idx 지정
    			// [1페이지 클릭 >> (1*5) -5 = 0 시작]
    			// [2페이지 클릭 >> (2*5) -5 = 5 시작]
    			idx = (pageCurrent * pageList) - pageList;
    			
    			var checkCount = 1;
    			for(var i=idx; i<tableList.length; i++){ //반복문을 수행하면서 tbody에 tr데이터 삽입 실시
    				if(checkCount > pageList){ //한페이지에 표시될 목록을 초과한 경우
    					return;
    				}


    				// json 데이터 파싱 실시
    				var jsonObject = JSON.parse(JSON.stringify(tableList[i])); //각 배열에 있는 jsonObject 참조
    				idx = jsonObject.idx;
    				var name = jsonObject.name;
    				var age = jsonObject.age;


    				// 동적으로 리스트 추가
    				var insertTr = ""; // 변수 선언
    				insertTr += "<tr>"; // body 에 남겨둔 예시처럼 데이터 삽입
    				insertTr += "<th scope='row'>" + idx + "</th>"; // body 에 남겨둔 예시처럼 데이터 삽입
    				insertTr += "<td>" + name + "</td>";
    				insertTr += "<td>" + age + "</td>";
    				insertTr += "</tr>";    


    				// jquery append 사용해 동적으로 추가 실시
    				$("#dyn_tbody").append(insertTr);  


    				// 카운트 횟수 증가 		
    				checkCount ++;	
    			}							
    		}
    	};
    	
    </script>

</head>


<body>

	<!-- 
	[요약 설명]	
	1. table :  테이블 속성을 설정합니다
	2. thead-dark : 테이블 헤더 속성을 설정합니다
	3. dyn_tbody : 동적으로 테이블 데이터를 생성합니다 (자바스크립트 확인 필요)
	4. Pagination : 쪽수 매기기 의미로 여러 페이지에 걸쳐 있음을 나타냅니다
	5. justify-content : 페이징 레이아웃을 중앙 정렬을 실시합니다
	6. 부트스트랩 공식 사이트 : https://getbootstrap.com/docs/4.1/content/typography/
	 -->


	<!-- 테이블 속성 정의 -->
	<table class="table">
	  <thead class="thead-dark">
	    <tr>
	      <th scope="col">번호</th>
	      <th scope="col">이름</th>
	      <th scope="col">나이</th>	      
	    </tr>
	  </thead>
	  <tbody id="dyn_tbody">
	    <!-- <tr>
	      <th scope="row">1</th>
	      <td>Mark</td>
	      <td>Otto</td>	      
	    </tr> -->
	  </tbody>
	</table>


	<!-- 페이징 속성 정의 -->
	<nav aria-label="Page navigation example">		
	  <ul id="dyn_ul" class="pagination" style="justify-content: center;">
	    <!-- <li class="page-item"><a class="page-link" href="#">Previous</a></li>
	    <li class="page-item"><a class="page-link" href="#">1</a></li>	    
	    <li class="page-item"><a class="page-link" href="#">Next</a></li> -->
	  </ul>
	</nav>

		
</body>

</html>

 

[결과 출력]

​

[요약 설명]

​

1. table : 테이블 속성을 설정합니다

2. thead-dark : 테이블 헤더 속성을 설정합니다

3. dyn_tbody : 동적으로 테이블 데이터를 생성합니다 (자바스크립트 확인 필요)

4. Pagination : 쪽수 매기기 의미로 여러 페이지에 걸쳐 있음을 나타냅니다

5. justify-content : 페이징 레이아웃을 중앙 정렬을 실시합니다

6. 부트스트랩 공식 사이트 : https://getbootstrap.com/docs/4.1/content/typography/

 

Typography

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

getbootstrap.com

반응형
저작자표시

'FrontEnd' 카테고리의 다른 글

57. (html/css/javascript/jquery) 부트스트랩 (bootstrap) button 버튼 large , small , block 속성 정의 실시  (0) 2021.07.20
56. (html/css/javascript/jquery) 부트스트랩 (bootstrap) alert 사용해 메시지 박스 구현 실시  (0) 2021.07.20
54. (html/css/javascript/jquery) 부트스트랩 (bootstrap) h 태그에 display 속성 사용해 제목 표시 실시  (0) 2021.07.20
53. (html/css/javascript/jquery) 부트스트랩 (bootstrap) 기본 속성 설명 및 색상 정의 설명  (0) 2021.07.20
52. (html/css/javascript/jquery) 부트스트랩 (bootstrap) p 태그 text 속성 사용 및 hr 수평선 사용  (0) 2021.07.20
'FrontEnd' Related Articles more
Comments