티스토리 뷰

WEB/JQuery

반응형 공지사항 게시판 목록 (JSON & 페이징 포함)

silverline79 2026. 1. 23. 21:29 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반응형 공지사항 게시판</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* [1] 기본 및 레이아웃 설정 */
        :root { --primary-color: #007bff; --border-color: #dee2e6; }
        body { font-family: 'Pretendard', sans-serif; background: #f8f9fa; padding: 20px; color: #333; }
        .container { max-width: 1000px; margin: 0 auto; background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
        h2 { margin-top: 0; padding-bottom: 20px; border-bottom: 2px solid var(--primary-color); }

        /* [2] 반응형 테이블 스타일 */
        .board-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
        .board-table th, .board-table td { padding: 15px; border-bottom: 1px solid var(--border-color); text-align: center; }
        .board-table th { background: #f1f3f5; font-weight: bold; font-size: 14px; }
        .board-table .title-cell { text-align: left; cursor: pointer; }
        .board-table .title-cell:hover { text-decoration: underline; color: var(--primary-color); }

        /* 모바일 대응: 너비가 600px 이하일 때 */
        @media screen and (max-width: 600px) {
            .board-table thead { display: none; } /* 제목 행 숨김 */
            .board-table tr { display: block; border-bottom: 2px solid var(--border-color); padding: 10px 0; }
            .board-table td { display: block; text-align: left; padding: 5px 15px; border: none; }
            .board-table td:before { content: attr(data-label); font-weight: bold; width: 60px; display: inline-block; color: #888; }
            .board-table .title-cell { font-size: 1.1rem; font-weight: bold; padding-top: 10px; }
        }

        /* [3] 페이징 스타일 */
        .pagination { display: flex; justify-content: center; gap: 5px; list-style: none; padding: 0; }
        .pagination li { cursor: pointer; padding: 8px 14px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 14px; }
        .pagination li:hover { background: #f1f3f5; }
        .pagination li.active { background: var(--primary-color); color: white; border-color: var(--primary-color); }
        .pagination li.disabled { color: #ccc; cursor: default; pointer-events: none; }
    </style>
</head>
<body>

<div class="container">
    <h2>📢 공지사항</h2>
    
    <table class="board-table">
        <thead>
            <tr>
                <th style="width: 80px;">순번</th>
                <th>제목</th>
                <th style="width: 120px;">작성자</th>
                <th style="width: 120px;">날짜</th>
            </tr>
        </thead>
        <tbody id="board-body">
            </tbody>
    </table>

    <ul class="pagination" id="pagination"></ul>
</div>

<script>
$(document).ready(function() {
    // 1. 대량의 샘플 데이터 생성 (실제로는 서버 API 호출)
    let noticeData = [];
    for (let i = 1; i <= 55; i++) {
        noticeData.push({
            no: i,
            title: i + "번째 공지사항 제목입니다. 중요한 내용을 확인하세요.",
            author: "관리자",
            date: "2026-01-" + (i % 31 + 1).toString().padStart(2, '0')
        });
    }
    // 최신글이 위로 오도록 역순 정렬
    noticeData.reverse();

    const itemsPerPage = 10; // 페이지당 글 수
    let currentPage = 1;

    // 2. 게시글 출력 함수
    function displayBoard(page) {
        currentPage = page;
        const start = (page - 1) * itemsPerPage;
        const end = start + itemsPerPage;
        const paginatedData = noticeData.slice(start, end);

        let html = "";
        paginatedData.forEach(item => {
            html += `
                <tr>
                    <td data-label="순번">${item.no}</td>
                    <td data-label="제목" class="title-cell">${item.title}</td>
                    <td data-label="작성자">${item.author}</td>
                    <td data-label="날짜">${item.date}</td>
                </tr>`;
        });
        $('#board-body').html(html);
        displayPagination();
    }

    // 3. 페이징 버튼 생성 함수
    function displayPagination() {
        const totalPages = Math.ceil(noticeData.length / itemsPerPage);
        let paginationHtml = "";

        // 이전 버튼
        paginationHtml += `<li class="${currentPage === 1 ? 'disabled' : ''}" onclick="changePage(${currentPage - 1})">&lt;</li>`;

        // 페이지 번호 (최대 5개씩 표시 예시)
        for (let i = 1; i <= totalPages; i++) {
            paginationHtml += `<li class="${currentPage === i ? 'active' : ''}" onclick="changePage(${i})">${i}</li>`;
        }

        // 다음 버튼
        paginationHtml += `<li class="${currentPage === totalPages ? 'disabled' : ''}" onclick="changePage(${currentPage + 1})">&gt;</li>`;

        $('#pagination').html(paginationHtml);
    }

    // 4. 페이지 변경 함수 (글로벌 스코프)
    window.changePage = function(page) {
        displayBoard(page);
    };

    // 초기 실행
    displayBoard(1);
});
</script>

</body>
</html>

 

반응형 공지사항 게시판 (JSON _ 페이징 포함).html
0.01MB

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.

'WEB > JQuery' 카테고리의 다른 글

공지사항 등록/수정  (0) 2026.01.23
공지사항 상세보기 화면 (View)  (0) 2026.01.23
프로필 이미지 기능이 포함된 인사 관리 시스템  (0) 2026.01.23
검색 결과 바로 선택 기능이 추가된 통합 코드  (0) 2026.01.22
인사 관리 트리 탐색기 (검색/초기화 버튼 포함)  (0) 2026.01.22
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/01   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함