PHP 페이징 + Ajax (코드이그나이터)

function paging($table, $currentPage = null)
{
    $blockCount = 10;
    $blockPage = 10;

    $rowCount = $this->Common_model->get_table_query_cnt($table, "*");

    if ($currentPage == null)
        $currentPage = 1;

    $totalPage = floor(($rowCount - 1) / $blockPage) + 1;

    if ($totalPage < $currentPage)
        $currentPage = $totalPage;

    if ($currentPage < 1)
        $currentPage = 1;

    $data['startCount'] = ($currentPage - 1) * $blockCount;

    $data['startPage'] = floor(($currentPage - 1) / $blockPage) * $blockPage + 1;
    $data['endPage'] = $data['startPage'] + $blockCount - 1;

    if ($data['endPage'] > $totalPage)
        $data['endPage'] = $totalPage;

    $data['limitArray'] = Array($data['startCount'], $blockCount);

    $data['currentPage'] = $currentPage;
    $data['blockPage'] = $blockPage;
    $data['totalPage'] = $totalPage;

    return $data;
}

blockCount : 한 번에 보여질 게시물 수

blockPage : 한 번에 보여질 페이지 수

currentPage : 현재 페이지

totalPage : DB에서 가져온 전체 레코드 수를 blockPage로 나눈 값

( 총 레코드 17개를 가져왔다면 2페이지, 5개를 가져왔다면 1페이지)

startCount : 현재 페이지 게시물의 처음 인덱스

(2번페이지면 11번, 3번 페이지면 21번) -> DB 에서 (mysql) 11번부터 10개 가져오라는 등의 작업을 할때 필요

limitArray : mysql에서 limit 1,10 을 실행하기 위한 Array (코드이그나이터에서 기본 제공하는 함수 이용)

startPage : 현재 페이지블록의 처음,  => 현재 페이지가 7이라면 1

endPage :  현재 페이지블록의 끝     => 현재 페이지가 7이라면 10

처음 1페이지의 화면은 (메뉴에서 해당 뷰를 선택할 때) 로드로 보여준다

컨트롤러

function view_sleep_info()
{
    $head['menu_idx'] = 'sleep_info'; //Head Menu
    $side['sub_menu_idx'] = 'sleep_info'; //Side Menu

    $data = $this->paging("TB_DAILY", 1);
    $data['list'] = $this->Common_model->get_table_query('TB_DAYS', NULL, NULL, Array('seq', 'desc'), $data['limitArray']);
    $this->load->view("custom_header", $head);
    $this->load->view("contents/sleep_info", $data);
    $this->load->view("side", $side);
    $this->load->view("footer");
}

뷰 화면

<div class="panel-body">
   <div class="" data-pattern="priority-columns" data-focus-btn-icon="fa-asterisk"
       data-sticky-table-header="true" data-add-display-all-btn="true" data-add-focus-btn="false">
      <table class="view_table main_table" cellspacing="0" style="width:98%">
         <thead>
         <tr>
            <th class="seq">번호</th>
            <th class="qrcode">QRCODE</th>
            <th class="position">매트리스 포지션</th>
            <th class="sleep_bit">수면시간 분할</th>
            <th class="active">뒤척임</th>
            <th class="light">얕은 수면</th>
            <th class="deep">깊은 수면</th>
            <th class="sleep_date">수면일</th>
            <th class="sleep_time">수면시간</th>
            <th class="sleep_data">수면데이터</th>
            <th class="regdt">등록일</th>
         </tr>
         </thead>

         <tbody class="data_list" id="sleep_list_data">
                  <?
                  foreach ($list as $row): ?>
            <tr>
               <td><?= $row['SEQ'] ?></td>
               <td><?= $row['QRCODE'] ?></td>
               <td><?= $row['POSITION'] ?></td>
               <td><?= $row['SLEEP_BIT'] ?></td>
               <td><?= $row['ACTIVE'] ?></td>
               <td><?= $row['LIGHT'] ?></td>
               <td><?= $row['DEEP'] ?></td>
               <td><?= $row['SLEEP_DATE'] ?></td>
               <td><?= $row['SLEEP_TIME'] ?></td>
               <td><textarea cols="60" rows="3" readonly style='font-size:13px; width:80%; border:0; padding:10px 0px; '><?= $row['SLEEP_DATA'] ?></textarea></td>
               <td><?= $row['REGDT'] ?></td>
            </tr>
                  <? endforeach; ?>
         </tbody>
      </table>
   </div>
</div>

<div class="row text-center">
   <div class="pagination" id="pagination">

      <li class="page-list active">
         <a>1</a>
      </li>
              <? for ($i = 2; $i <= 10; $i++) { ?>
         <li class="page-list">
            <a href="javascript:getPaging(<?= $i ?>)"><?= $i ?></a>
         </li>
              <? } ?>

      <li class="page-item">
         <a class="page-link" href="javascript:getPaging(11)">></a>
      </li>
      <li class="page-item">
         <a class="page-link" href="javascript:getPaging(<?= $totalPage ?>)">>></a>
      </li>

   </div>
</div>

2페이지부터는 AJax 처리

function view_sleep_info_ajax($currentPage = null)
{
    $data = $this->paging("TB_DAILY", $currentPage);
    $data['list'] = $this->Common_model->get_table_query('TB_DAYS', NULL, NULL, Array('seq', 'desc'), $data['limitArray']);

    echo json_encode($data);
}

<script>

    function getPaging(url) {
        $.ajax({
            url: "/main/view_sleep_info_ajax/" + url,
            type: "GET",
            dataType: "json",
            success: function (data) {
                console.log(data);
                var rstHtml = '';

                if (data.list.length > 0) {
                    $.each(data.list, function (key, value) {
                        rstHtml += "<tr>";
                        rstHtml += "<td>" + data.list[key].SEQ + "</td>";
                        rstHtml += "<td>" + data.list[key].QRCODE + "</td>";
                        rstHtml += "<td>" + data.list[key].POSITION + "</td>";
                        rstHtml += "<td>" + data.list[key].SLEEP_BIT + "</td>";
                        rstHtml += "<td>" + data.list[key].ACTIVE + "</td>";
                        rstHtml += "<td>" + data.list[key].LIGHT + "</td>";
                        rstHtml += "<td>" + data.list[key].DEEP + "</td>";
                        rstHtml += "<td>" + data.list[key].SLEEP_DATE + "</td>";
                        rstHtml += "<td>" + data.list[key].SLEEP_TIME + "</td>";
                        rstHtml += "<td><textarea cols=60 rows=3 readonly style='font-size:13px; width:80%; border:0; padding:10px 0px;'>" + data.list[key].SLEEP_DATA + "</textarea></td>";
                        rstHtml += "<td>" + data.list[key].REGDT + "</td>";
                        rstHtml += "</tr>";
                    });

                } else {
                    rstHtml += "<tr>";
                    rstHtml += " <td colspan='12'>" + "데이터가 존재하지 않습니다" + " </td>";
                    rstHtml += "</tr>";
                }
                $('#sleep_list_data').empty();
                $('#sleep_list_data').html(rstHtml);

                var pagingHtml = '';


                if (data.currentPage > data.blockPage) {

                    pagingHtml += "<li class=page-item>";
                    pagingHtml += "<a class=page-link href='javascript:getPaging(1)'><<";
                    pagingHtml += "</a></li>";
                    pagingHtml += "<li class=page-item>";
                    pagingHtml += "<a class=page-link href='javascript:getPaging(" + (data.startPage - 1) + ")'><";
                    pagingHtml += "</a></li>";
                }



                for (var i = data.startPage; i <= data.endPage; i++) {

                    if (i == data.currentPage) {
                        pagingHtml += "<li class='page-item active'>";
                    } else {
                        pagingHtml += "<li class=page-item>";
                    }
                    pagingHtml += "<a class=page-link href='javascript:getPaging(" + i + ")'>" + i;
                    pagingHtml += "</a></li>";
                }

                if (data.totalPage - data.startPage > data.blockPage) {
                    pagingHtml += "<li class=page-item>";
                    pagingHtml += "<a class=page-link href='javascript:getPaging(" + (data.endPage + 1) + ")'>>";
                    pagingHtml += "</a></li>";
                    pagingHtml += "<li class=page-item>";
                    pagingHtml += "<a class=page-link href='javascript:getPaging(" + data.totalPage + ")'>>>";
                    pagingHtml += "</a></li>";
                }

                $('#pagination').empty();
                $('#pagination').html(pagingHtml);

            },
            error: function (e) {
            }
        });
    }
</script>