25. 페이지 active - eungyukm/DjangoBase GitHub Wiki

페이지 active

  1. page active 상태 표현
    render_data = {
        'board_data' : board_model,
        'board_info_idx' : board_info_idx,
        'content_list' : content_list,
        'pagenation_data' : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        'page_num' : page_num,
    }

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>미니 프로젝트</title>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

{% include 'top_menu.html' %}

<!-- 게시글 리스트 -->
<div class="container" style="margin-top:100px">
	<div class="card shadow">
		<div class="card-body">
			<h4 class="card-title">{{board_data.board_info_name}}</h4>
			<table class="table table-hover" id='board_list'>
				<thead>
					<tr>
						<th class="text-center d-none d-md-table-cell">글번호</th>
						<th class="w-50">제목</th>
						<th class="text-center d-none d-md-table-cell">작성자</th>
						<th class="text-center d-none d-md-table-cell">작성날짜</th>
					</tr>
				</thead>
				<tbody>
					{% for c1 in content_list %}
					<tr>
						<td class="text-center d-none d-md-table-cell">{{c1.content_idx}}</td>
						<td><a href='/board/board_read?board_info_idx={{board_info_idx}}&content_idx={{c1.content_idx}}'>
							{{c1.content_subject}}
						</a></td>
						<td class="text-center d-none d-md-table-cell">{{c1.content_writer_idx.user_name}}</td>
						<td class="text-center d-none d-md-table-cell">{{c1.content_date|date:'Y-m-d'}}</td>
						
					</tr>
					{% endfor %}
				</tbody>
			</table>
			
			<div class="d-none d-md-block">
				<ul class="pagination justify-content-center">
					<li class="page-item">
						<a href="#" class="page-link">이전</a>
					</li>
					{% for idx in pagenation_data %}

					{% if page_num == idx %}
					<li class="page-item active">
						<a href="/board/board_main?board_info_idx={{board_info_idx}}&page_num={{idx}}" class="page-link">{{idx}}</a>
					</li>
					{% else %}
					<li class="page-item">
						<a href="/board/board_main?board_info_idx={{board_info_idx}}&page_num={{idx}}" class="page-link">{{idx}}</a>
					</li>
					{% endif %}
					{% endfor %}
					<li class="page-item">
						<a href="#" class="page-link">다음</a>
					</li>
				</ul>
			</div>
			
			<div class="text-right">
				<a href="/board/board_write?board_info_idx={{board_info_idx}}" class="btn btn-primary">글쓰기</a>
			</div>
			
		</div>
	</div>
</div>

{% include 'bottom_info.html' %}
</body>
</html>
  1. 페이징
def board_main(request) :
    # 파라미터를 추출합니다.
    board_info_idx = request.GET['board_info_idx']

    page_num = request.GET.get('page_num')
    if page_num == None :
        page_num = '1'

    page_num = int(page_num)

    # 현재 게시판 정보를 가져옵니다.
    board_model = board_app.models.BoardInfoTable.objects.get(board_info_idx=board_info_idx)

    # 현재 게시판의 글 목록을 가져옵니다.
    content_list = board_app.models.ContentTable.objects
    content_list = content_list.select_related('content_writer_idx' , 'content_board_idx')
    content_list = content_list.filter(content_board_idx = board_info_idx)
    content_list = content_list.order_by('-content_idx')

    # 전체 글의 개수를 가져옵니다.
    content_cnt = len(content_list)

    # 페이징을 위한 객체를 생성합니다.
    # 첫 번째 : 전체 데이터 목록,
    # 두 번째 : 한 페이지당 보여줄 데이터의 개수
    paginator = Paginator(content_list, 10)
    content_list = paginator.get_page(page_num)

    # 하단 페이지네이션의 최소와 최대값 구하는 식
    a1 = int((page_num -1) / 10)
    a2 = a1 * 10
    page_min = a2 + 1
    page_max = page_min + 9

    # 전체 페이지 수를 구합니다.
    page_cnt = content_cnt // 10
    if content_cnt % 10 > 0 :
        page_cnt = page_cnt + 1

    # 이전
    page_prev = page_min - 1
    # 다음
    page_next = page_max + 1

    # page_next가 page_cnt보다 크면 전체 페이지수로 세팅한다.
    if page_next > page_cnt :
        page_next = page_cnt

    # 만약 page_max가 전체 페이지 수 보다 크면 전체 페이지수로 세팅합니다.
    if page_max > page_cnt :
        page_max = page_cnt

    pagenation_list = list(range(page_min, page_max + 1))

    template = loader.get_template('board_main.html')

    render_data = {
        'board_data' : board_model,
        'board_info_idx' : board_info_idx,
        'content_list' : content_list,
        'pagenation_data' : pagenation_list,
        'page_num' : page_num,
        'page_prev' : page_prev,
        'page_next' : page_next,
        'page_cnt' : page_cnt,
    }
    return HttpResponse(template.render(render_data, request))

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>미니 프로젝트</title>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

{% include 'top_menu.html' %}

<!-- 게시글 리스트 -->
<div class="container" style="margin-top:100px">
	<div class="card shadow">
		<div class="card-body">
			<h4 class="card-title">{{board_data.board_info_name}}</h4>
			<table class="table table-hover" id='board_list'>
				<thead>
					<tr>
						<th class="text-center d-none d-md-table-cell">글번호</th>
						<th class="w-50">제목</th>
						<th class="text-center d-none d-md-table-cell">작성자</th>
						<th class="text-center d-none d-md-table-cell">작성날짜</th>
					</tr>
				</thead>
				<tbody>
					{% for c1 in content_list %}
					<tr>
						<td class="text-center d-none d-md-table-cell">{{c1.content_idx}}</td>
						<td><a href='/board/board_read?board_info_idx={{board_info_idx}}&content_idx={{c1.content_idx}}'>
							{{c1.content_subject}}
						</a></td>
						<td class="text-center d-none d-md-table-cell">{{c1.content_writer_idx.user_name}}</td>
						<td class="text-center d-none d-md-table-cell">{{c1.content_date|date:'Y-m-d'}}</td>
						
					</tr>
					{% endfor %}
				</tbody>
			</table>
			
			<div class="d-none d-md-block">
				<ul class="pagination justify-content-center">
					{% if page_prev == 0 %}
					<li class="page-item disabled">
						<a href="/board/board_main?board_info_idx={{board_info_idx}}&page_num={{page_prev}}" class="page-link">이전</a>
					</li>
					{% else %}
					<li class="page-item">
						<a href="/board/board_main?board_info_idx={{board_info_idx}}&page_num={{page_prev}}" class="page-link">이전</a>
					</li>
					{% endif %}

					{% for idx in pagenation_data %}

					{% if page_num == idx %}
					<li class="page-item active">
						<a href="/board/board_main?board_info_idx={{board_info_idx}}&page_num={{idx}}" class="page-link">{{idx}}</a>
					</li>
					{% else %}
					<li class="page-item">
						<a href="/board/board_main?board_info_idx={{board_info_idx}}&page_num={{idx}}" class="page-link">{{idx}}</a>
					</li>
					{% endif %}
					{% endfor %}

					{% if page_next == page_cnt %}
					<li class="page-item disabled">
						<a href="/board/board_main?board_info_idx={{board_info_idx}}&page_num={{page_next}}" class="page-link">다음</a>
					</li>
					{% else %}
					<li class="page-item">
						<a href="/board/board_main?board_info_idx={{board_info_idx}}&page_num={{page_next}}" class="page-link">다음</a>
					</li>
					{% endif%}
				</ul>
			</div>
			
			<div class="d-block d-md-none">
				<ul class="pagination justify-content-center">
					<li class="page-item">
						<a href="#" class="page-link">이전</a>
					</li>

					<li class="page-item">
						<a href="#" class="page-link">다음</a>
					</li>
				</ul>
			</div>
			
			<div class="text-right">
				<a href="/board/board_write?board_info_idx={{board_info_idx}}" class="btn btn-primary">글쓰기</a>
			</div>
			
		</div>
	</div>
</div>

{% include 'bottom_info.html' %}
</body>
</html>
⚠️ **GitHub.com Fallback** ⚠️