페이징(페이지 목록/리스트) 구현 > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

2012-03-05
. 2페이지 이상에서 검색에서 페이징(paging) 오류 수정위해 추가

2017-11-13 01:23
. php 4 관련 mysql 쿼리를 PHP 5와 7에 작동하도록 변경
. mysql_connect, mysql_select_db, mysql_query 를 mysqli_connect, mysqli_select_db, mysqli_query 으로 변경

2017-11-15 04:03
. 하단 페이징 코드 수정

2017-11-27 16:50
. sql 퀴리 오류여부를 표시하는 코드  추가

2020-02-08 20:55
. style 분리
. 디비 필드 등을 상단에서 설정으로 하부 내용에 영향이 없도록 변경


1. 스타일문서 :  문서_style.css
#app_frm { }
.app_title { font-size:1.2em; font-weight:bold; padding:10px 0 15px 0; }
#app_frm th { padding-left:10px; }

#hp_table { }
#hp_table img { border:0; }
#hp_table a:link, a:visited {color:#000; text-decoration:none; }
#hp_table a:hover, a:focus, a:active {color:#000; text-decoration:none; }

#hp_table table { background-color:#e5e5e4; border-top:solid #bf82bb 1px; border-bottom:solid #c1c1c1 1px; }
#hp_table th { padding:7px 10px; text-align:center; font-weight:bold; letter-spacing:-1; background:#f5f5f4; color:#292929; }
#hp_table td { padding:5px 0; background:#ffffff; color:#797979; line-height:20px; }
#hp_table .hp_center { text-align:center; }
#hp_table .hp_left { text-align:left; }
#hp_table .hp_right { text-align:right; }

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
}

input[type=text]:focus,input[type=password]:focus,  textarea:focus,select:focus {
-webkit-box-shadow:  0 0 5px #9ed4ff;
-moz-box-shadow:  0 0 5px #9ed4ff;
box-shadow: 0 0 5px #9ed4ff;
border: 1px solid #558ab7 !important;
}

.hp_input {height:35px;}

.hp_list_total {
float: left;
line-height: 30px;
font-size: 0.92em;
color:
#4e546f;
background:
#d4d4d4;
padding: 0 10px;
border-radius: 5px;
}

a.hp_btn,.hp_btn{line-height:35px;height:35px;padding:0 10px;text-align:center;font-weight:bold;border:0;
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;}
a.hp_btn_b01,.hp_btn_b01 {display:inline-block;background:#4c4f6f;color:#fff;text-decoration:none;vertical-align:middle}
.hp_btn_b01:hover, .hp_btn_b01:hover {background:#54598c}
a.hp_btn_b02,.hp_btn_b02 {display:inline-block;background:#253dbe;padding:0 10px;color:#fff;text-decoration:none;border:0;vertical-align:middle;}
a.hp_btn_b02:hover, .hp_btn_b02:hover {background:#0025eb}
a.hp_btn_b03, .hp_btn_b03 {display:inline-block;background:#fff;border:1px solid #b9bdd3;color:#646982;text-decoration:none;vertical-align:middle}
a.hp_btn_b03:hover, .hp_btn_b03:hover {background:#ebedf6}
a.hp_btn_b04, .hp_btn_b04 {display:inline-block;background:#fff;border:1px solid #ccc;color:#707070;text-decoration:none;vertical-align:middle}
a.hp_btn_b04:hover, .hp_btn_b04:hover {color:#333;background:#f9f9f9}
a.hp_btn_admin,.hp_btn_admin {display:inline-block;background:#d13f4a;color:#fff;text-decoration:none;vertical-align:middle} /* 관리자 전용 버튼 */

.hp_btn_admin:hover, a.hp_btn_admin:hover {background:#ff3746}

.hp_btn_submit {border:0;background:#253dbe;color:#fff;cursor:pointer;border:0}
.hp_btn_submit:hover {background:#0025eb}
button.hp_btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none}



2. 목록파일 :  문서명_list.php

<?php
$mysql_host     = "localhost";
$mysql_user     = "아이디";
$mysql_password = "비밀번호";
$mysql_db       = "데이타베이스";
$dbconn = mysqli_connect($mysql_host,$mysql_user,$mysql_password,$mysql_db);

// 그누보드5 사용시
//include_once "../common.php"; // 그누브도5 common.php 경로
//$dbconn = mysqli_connect(G5_MYSQL_HOST,G5_MYSQL_USER,G5_MYSQL_PASSWORD,G5_MYSQL_DB) ;

if (!$dbconn) {
    echo "Error: Unable to connect to MySQL." . PHP_EOL;
    echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;
    echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;
    exit;
}

//@mysqli_query("set names utf8");   // 한글문제 생기면 주석 해제
$file_name   = "문서";  // ex: 문서_list.php 일때는  문서 를 입력
$pagemax     = "20";  // 한페이지에 몇개씩 보여줄까요.
$page_scale  = "10";  // 하단 페이지 색인갯수
$sql_common = " from `테이블이름` ";
$sql_where   = " where 1 "; // 검색조건 , 기본값: where 1
$sql_orderby = " order by num desc"; // 정렬조건

$page_num    = $_GET['page_num'];
$SearchStr   = $_POST['SearchStr'];
$SearchPart  = $_POST['SearchPart'];
//echo "SearchPart = " .$SearchPart ."<br>";
//echo "SearchStr = " .$SearchStr ."<br>";

// Fatal error: Allowed memory size of  관련 오류날때 아래 주석 해지
// 참고: https://www.happyjung.com/lecture/2578
//ini_set('memory_limit','512M'); // 메모리 512MB 사용 
//ini_set('memory_limit','-1'); // 메모리 무제한 사용

//검색옵션 관련
$sql_search = "";
if(strlen($SearchStr) > 0) {
    switch ($SearchPart) {
        case "all":
            $sql_search .= " and (조건1 LIKE '%{$SearchStr}%') or (조건2 LIKE '%{$SearchStr}%') ";
        break;
        case "조건1":
            $sql_search .= " and 조건1 LIKE '%{$SearchStr}%' ";
        break;
        case "조건2":
            $sql_search .= " and 조건2 LIKE '%{$SearchStr}%' ";
        break;
    }
}

$page_sql = "select * {$sql_common} {$sql_where} ";

$page_qry = mysqli_query($dbconn,($page_sql . $sql_search));
//echo "page_sql = {$page_sql} {$sql_search}<br>";

$tot = mysqli_num_rows($page_qry);
$page_tot = (int)($tot/$pagemax);

if($page_tot < ($tot/$pagemax)) {
    $page_tot = $page_tot+1;
}
if(!$page_num) {
    $page_num = 1;
    $start_line = 0;
}
else {
    $start_line=($pagemax * $page_num)-$pagemax;
}  
// 2페이지 이상에서 검색에서 페이징 오류 수정위해 추가
if ($page_tot <= 1) {
    $page_num = "1";
    $start_line = 0;
}


$sql_order = "";
$sql = "select * {$sql_common} {$sql_where} ";
$sql_order = " {$sql_orderby} limit {$start_line},{$pagemax} ";
$qry = mysqli_query($dbconn,($sql . $sql_search . $sql_order));

if (!mysqli_query($dbconn, $sql)) {  // sql 쿼리 오류여부 확인
    printf("<div>sql_queryErrormessage: %s\n</div>", mysqli_error($dbconn));
}

$SearchData = "&SearchPart={$SearchPart}&SearchStr={$SearchStr}";  // 페이징에 노출된 검색조건들
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>해피정닷컴의 목록 &amp; 페이징</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body, th, td { font-size:12px; }
#hp_table { }
#hp_table img { border:0; }
#hp_table a:link, a:visited {color:#000; text-decoration:none; }
#hp_table a:hover, a:focus, a:active {color:#000; text-decoration:none; }
#hp_table table { background-color:#e5e5e4; border-top:solid #bf82bb 1px; border-bottom:solid #c1c1c1 1px; }
#hp_table th { padding:7px 10px; text-align:center; font-weight:bold; letter-spacing:-1; background:#f5f5f4; color:#292929; }
#hp_table td { padding:5px 0; background:#ffffff; color:#797979; line-height:20px; }
#hp_table .hp_center { text-align:center; }
#hp_table .hp_left { text-align:left; }
#hp_table .hp_right { text-align:right; }

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
}

input[type=text]:focus,input[type=password]:focus,  textarea:focus,select:focus {
-webkit-box-shadow:  0 0 5px #9ed4ff;
-moz-box-shadow:  0 0 5px #9ed4ff;
box-shadow: 0 0 5px #9ed4ff;
border: 1px solid #558ab7 !important;
}

.hp_input {height:35px;}

.hp_list_total {
float: left;
line-height: 30px;
font-size: 0.92em;
color:
#4e546f;
background:
#d4d4d4;
padding: 0 10px;
border-radius: 5px;
}

a.hp_btn,.hp_btn{line-height:35px;height:35px;padding:0 10px;text-align:center;font-weight:bold;border:0;
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;}
a.hp_btn_b01,.hp_btn_b01 {display:inline-block;background:#4c4f6f;color:#fff;text-decoration:none;vertical-align:middle}
.hp_btn_b01:hover, .hp_btn_b01:hover {background:#54598c}
a.hp_btn_b02,.hp_btn_b02 {display:inline-block;background:#253dbe;padding:0 10px;color:#fff;text-decoration:none;border:0;vertical-align:middle;}
a.hp_btn_b02:hover, .hp_btn_b02:hover {background:#0025eb}
a.hp_btn_b03, .hp_btn_b03 {display:inline-block;background:#fff;border:1px solid #b9bdd3;color:#646982;text-decoration:none;vertical-align:middle}
a.hp_btn_b03:hover, .hp_btn_b03:hover {background:#ebedf6}
a.hp_btn_b04, .hp_btn_b04 {display:inline-block;background:#fff;border:1px solid #ccc;color:#707070;text-decoration:none;vertical-align:middle}
a.hp_btn_b04:hover, .hp_btn_b04:hover {color:#333;background:#f9f9f9}
a.hp_btn_admin,.hp_btn_admin {display:inline-block;background:#d13f4a;color:#fff;text-decoration:none;vertical-align:middle} /* 관리자 전용 버튼 */
.hp_btn_admin:hover, a.hp_btn_admin:hover {background:#ff3746}

button.hp_btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none}
</style>
</head>

<body>
<div style="font-size:2em; text-align:center; margin:0 auto;">페이징(페이지 목록/리스트) 구현</div>

<div style="width:100%; text-align:left;">
    <div class="hp_list_total">
        Total <?php echo $tot; ?>건 <?php echo $page_num; ?>페이지
    </div>
    <?php // action을 연결안하면 페이징으로 인한 검색결과가 안보이는 오류발생  2012-03-31 수정 ?>
    
    <div style="float:right; padding: 0 2px 0 2px;"><a href="<?php echo "{$file_name}_xls.php"; ?>" class="hp_btn hp_btn_admin">엑셀 다운로드</a></div>
    <?php // 엑셀 다운로드 : https://www.happyjung.com/lecture/888 ?>
    
    <div style="float:right; padding: 0 2px 0 2px;"><a href="<?php echo "{$file_name}_list.php"; ?>" class="hp_btn hp_btn_b01">전체</a></div>
    
    <div style="float:right; padding: 0 2px 0 2px;">
        <form name="search_form" method="post" action="<?php echo $PHP_SELF?>">
            <select name="SearchPart" class="hp_input">
                <option <?php if ($SearchPart == "subject") { echo "selected='selected'"; } ?> value="subject">제목</option>
                <option <?php if ($SearchPart == "name") { echo "selected='selected'"; } ?> value="name">이름</option>
                <!--<option <?php if ($SearchPart == "all") { echo "selected='selected'"; } ?> value="all">전 체</option>-->
            </select>
            <input name="SearchStr" maxlength="30" value="<?php echo $SearchStr; ?>" class="hp_input">
            <input type="submit" name="submit" value=" 검색 " class="hp_btn hp_btn_b02">
        </form>
    </div>
</div>
<div style="clear:both;"></div>

<table width="100%" id="hp_table">
    <tr>
        <th width="40">번호</th>
        <th>제목</th>
        <th>생일</th>
        <th>이름</th>
        <th>작성일</th>
        <th>수정 / 삭제</th>
    </tr>
    <?php
    $id_num = 0;
    while($row = mysqli_fetch_array($qry)) {
        $idx_num = $tot - ($pagemax * ($page_num-1)) - $id_num;

        //echo "tot = ". $tot ."<br>";
        //echo "pagemax = ". $pagemax ."<br>";
        //echo "page_num = ". $page_num ."<br>";
        //echo "idx_num = ". $idx_num ."<br>";
        //echo "id_num = ". $id_num ."<br>";

        //$where = substr($row['mb_addr1'], 0, 6);
        $index_num = $row['num']; // 고유번호
        $idx_link = "{$file_name}_view.php?idx={$index_num}&page_num={$page_num}{$SearchData}";
        ?>
        <tr>
            <td class="hp_center"><a href="<?php echo $idx_link; ?>"><?php echo $idx_num; ?></a></td>
            <td><a href="<?php echo $idx_link; ?>"><?php echo $row['name']; ?></a></td>
            <td><?php echo $row['birth']; ?></td>
            <td class="hp_center"><?php echo $row['name']; ?></td>
            <td class="hp_center"><?php echo $row['wdate']; ?></td>
            <td class="hp_center">
                <a href="<?php echo "{$file_name}_edit.php?idx={$index_num}&page_num={$page_num}{$SearchData}"; ?>">수정</a> /
                <a href="<?php echo "{$file_name}_del.php?idx={$index_num}&page_num={$page_num}{$SearchData}"; ?>" onclick="return confirm('삭제하시겠습니까?')">삭제</a>
            </td>
        </tr>
        <?php
        $id_num++;
    }
    
    if ($tot == 0) { echo "<tr><td colspan='6' style='text-align:center;'>정보가 없습니다</td></tr>"; } 
    ?>
</table>


<?php 
// 페이징 시작
// 공통
$blockpage=(int)(($page_num-1)/$page_scale)*$page_scale+1;

//echo "page_num   = {$page_num}<br>";
//echo "page_tot   = {$page_tot}<br>";
//echo "page_scale = {$page_scale}<br>";
//echo "blockpage  = {$blockpage}<br>";

// 그누보드 버전 확인
$gnu_ver = substr(G5_GNUBOARD_VER,0,3);
//echo $gnu_ver ."<br>";

if ($gnu_ver) {
    // 아미나빌더 사용여부 확인
    $field_query = "SHOW COLUMNS FROM {$g5['member_table']} WHERE `Field` = 'as_photo';";
    $field_row = sql_fetch( $field_query );
    if($field_row['Field']) {
        $gnuboard_amina = 'yes';
    }
}

// 아미나빌더
if ($gnuboard_amina == 'yes') {
?>
<div class="list-page text-center">
    <ul class="pagination pagination-sm en">
        <?php
        if($blockpage==1) {
            echo "
                <li class=\"disabled\"><a><i class=\"fa fa-angle-double-left\"></i></a></li>
                <li class=\"disabled\"><a><i class=\"fa fa-angle-left\"></i></a></li>
            ";
        } else {
            $page=$blockpage-$page_scale;
            $page_prev=$blockpage-1;
            echo "
                <li><a href=\"{$file_name}_list.php?page_num=1{$SearchData}\"><i class=\"fa fa-angle-double-left\"></i></a></li>
                <li><a href=\"{$file_name}_list.php?page_num={$page_prev}{$SearchData}\"><i class=\"fa fa-angle-left\"></i></a></li>
            ";
        }
        
        if ($page_tot=='0') {
            echo "<li class=\"active\"><a>{$blockpage}</a></li>";
        }
        
        $i=1;
        while($i<=$page_scale && $blockpage<=$page_tot) {
            if($page_num==$blockpage) {
                echo "<li class=\"active\"><a>{$blockpage}</a></li>";
            } else {
                echo "<li><a href=\"{$file_name}_list.php?page_num={$blockpage}{$SearchData}\">{$blockpage}</a></li>";
            }
            $blockpage=$blockpage+1;
            $i++;
        }
        
        if($blockpage>$page_tot) {
            echo"
                <li class=\"disabled\"><a><i class=\"fa fa-angle-right\"></i></a></li>
                <li class=\"disabled\"><a><i class=\"fa fa-angle-double-right\"></i></a></li>
            ";
        } else {
            $page=$blockpage-$page_scale;
            echo "
                <li><a href=\"{$file_name}_list.php?page_num={$blockpage}{$SearchData}\"><i class=\"fa fa-angle-right\"></i></a></li>
                <li><a href=\"{$file_name}_list.php?page_num={$page_tot}{$SearchData}\"><i class=\"fa fa-angle-double-right\"></i></a></li>
            ";
        }
        ?>
    </ul>
</div>
<div class="clearfix"></div>
<?php
}
// 그누보드 5.3 이상
elseif ($gnu_ver>=5.3) {
?>
    <nav class="pg_wrap">
        <span class="pg">
            <?php
            if($blockpage==1) {
                echo "";
            } else {
                $page=$blockpage-$page_scale;
                $page_prev=$blockpage-1;
                echo "
                    <a href=\"{$file_name}_list.php?page_num=1{$SearchData}\" class=\"pg_page pg_start\">처음</a>
                    <a href=\"{$file_name}_list.php?page_num={$page_prev}{$SearchData}\" class=\"pg_page pg_prev\">이전</a>
                ";
            }
            
            if ($page_tot=='0') {
                echo "<span class=\"sound_only\">열린</span><strong class=\"pg_current\">{$blockpage}</strong><span class=\"sound_only\">페이지</span>";
            }
            
            $i=1;
            while($i<=$page_scale && $blockpage<=$page_tot) {
                if($page_num==$blockpage) {
                    echo "<span class=\"sound_only\">열린</span><strong class=\"pg_current\">{$blockpage}</strong><span class=\"sound_only\">페이지</span>";
                } else {
                    echo "<a href=\"{$file_name}_list.php?page_num={$blockpage}{$SearchData}\" class=\"pg_page\">{$blockpage}<span class=\"sound_only\">페이지</span></a>";
                }
                $blockpage=$blockpage+1;
                $i++;
            }
            
            if($blockpage>$page_tot) {
                echo"  &nbsp;&nbsp; ";
            } else {
                $page=$blockpage-$page_scale;
                echo "  
                    <a href=\"{$file_name}_list.php?page_num={$blockpage}{$SearchData}\" class=\"pg_page pg_next\">다음</a>
                    <a href=\"{$file_name}_list.php?page_num={$page_tot}{$SearchData}\" class=\"pg_page pg_end\">맨끝</a>
                ";
            }
            ?>
        </span>
    </nav>
<?php
}
// 그누보드 5.2이하 & etc
else {
?>
<div style="width:100%; padding:10px 0px 0px 0px; text-align:center;">
    <?php
    if($blockpage==1) {
        echo "";
    } else {
        $page=$blockpage-$page_scale;
        $page_prev=$blockpage-1;
        echo "
            [ <a href=\"{$file_name}_list.php?page_num=1{$SearchData}\">1</a> ] &nbsp;&nbsp;
            [ <a href=\"{$file_name}_list.php?page_num={$page_prev}{$SearchData}\">이전 {$page_scale}개</a> ] &nbsp;&nbsp;
        ";
    }
    
    if ($page_tot=='0') {
        echo "<span style=\"font-size:15px; font-weight:bold; color:#bb0000;\">1</span>";
    }
    
    $i=1;
    while($i<=$page_scale && $blockpage<=$page_tot) {
        if($page_num==$blockpage) {
            echo " <span style=\"font-size:15px; font-weight:bold; color:#bb0000;\">{$blockpage}</span> &nbsp;&nbsp; ";
        } else {
            echo " <a href=\"{$file_name}_list.php?page_num={$blockpage}{$SearchData}\">{$blockpage}</a> &nbsp;&nbsp; ";
        }
        $blockpage=$blockpage+1;
        $i++;
    }
    
    if($blockpage>$page_tot) {
        echo"  &nbsp;&nbsp; ";
    } else {
        $page=$blockpage-$page_scale;
        echo "
            [ <a href=\"{$file_name}_list.php?page_num={$blockpage}{$SearchData}\">다음 {$page_scale}개</a> ] &nbsp;&nbsp;
            [ <a href=\"{$file_name}_list.php?page_num={$page_tot}{$SearchData}\">{$page_tot}</a> ]
        ";
    }
    ?>
</div>
<?php
}
// 페이징 끝
?>

</body>
</html>
<?php
echo mysqli_error($dbconn);
// close connection
mysqli_close($dbconn);
?>


참조사이트
http://jubuntu.tistory.com/33
http://www.nzeo.com/bbs/zboard.php?id=p_study&no=1242 
http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=47680
http://php.net/manual/en/mysqli.select-db.php
http://php.net/manual/en/mysqli.query.php