[js] 페이징 컨트롤러 별도 배치

테이블 높이에 따라 페이징 컨트롤러의 위치가 변경되는 것을 방지하기 위해 페이징 컨트롤러를 별도로 배치

 

html

<div class="row" style="height: 650px; position: relative;">
    <div class="col-md" style="height: 90%;">
        <table id="grdS01" class="table table-bordered table-striped table-hover" style="width:100%; height: 90%;">
            <thead>
                <tr>
                    <th rowspan="2" style="width:30px; text-align:center;"><input type="checkbox" id="select-all"></th>
                    <th name="commGrp" rowspan="2" style="width:100px; text-align:center;">그룹</th>
                    <th name="commCd" rowspan="2" style="width:100px; text-align:center;">코드</th>
                    <th name="commNm" rowspan="2" style="width:100px; text-align:center;">코드명</th>
                    <th name="commRmk" rowspan="2" style="width:150px; text-align:center;">비고</th>
                    <th name="useYN" rowspan="2" style="width:150px; text-align:center;">사용여부</th>
                    <th name="dispNo" rowspan="2" style="width:150px; text-align:center; display:none;">순서</th>
                    <th colspan="2" style="text-align:center;">등록</th>
                    <th colspan="2" style="text-align:center;">갱신</th>
                </tr>
                <tr>
                    <th name="regDtm" style="width:150px; text-align:center;">등록일시</th>
                    <th name="regUsr" style="width:150px; text-align:center;">등록자</th>
                    <th name="uptDtm" style="width:150px; text-align:center;">갱신일시</th>
                    <th name="uptUsr" style="width:200px; text-align:center;">갱신자</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <!-- 페이징 컨트롤을 별도로 배치 -->
    <div id="S01_paging-controls" style="position: absolute; bottom: 0; width: 100%; text-align: center; background-color: #f9f9f9; padding: 10px;">
        <div id="S01_paging-controls-inner"></div>
    </div>
</div>

 

script

var fnCommGridSetting = function (...) {

...

    var table = $(gridId).DataTable({
        fixedHeader: true,
        paging: true,
        pagingType: 'simple_numbers',
        ajax: {
            type: "POST",
            url: ajaxUrl,
            data: function (d) {
                return $.extend({}, {
                    draw: d.draw,
                    start: d.start,
                    length: d.length
                }, ajaxData);
            },
            dataSrc: function (json) {
                return json.data;
            },
            error: function (xhr, error, code) {
                console.error('Ajax request failed:', xhr, error, code);
                alert('데이터를 불러오는 중 문제가 발생했습니다.');
            }
        },
        columns: dynamicColumns,
        dom: 'rt<"bottom"i<"dataTables_paginate"p>><"clear">', // 페이징 컨트롤을 기존 위치에서 제거하고 새로운 위치에 추가
        pageLength: 10,
        lengthMenu: [10, 25, 50, 100],
        language: {
            paginate: {
                first: '<<',
                last: '>>',
                next: '>',
                previous: '<'
            },
            lengthMenu: 'Show _MENU_ entries'
        },
        drawCallback: function (settings) {
            console.log("drawCallback called, settings:", settings); // 디버깅 로그

            // 초기화 단계와 데이터 로드 단계 구분
            if (settings.iDraw === 1) {
                console.log("Initial draw");

                // 초기화 단계에서만 페이징 컨트롤을 이동
                var existingPaginate = $(pagingId).find('.dataTables_paginate');
                if (existingPaginate.length > 0) {
                    existingPaginate.remove();
                    console.log("Existing paginate removed in drawCallback");
                }

                var paginate = $('.dataTables_paginate');
                console.log("drawCallback paginate:", paginate.html()); // 디버깅 로그
                if (paginate.length > 0 && paginate.html().trim() !== '') {
                    $(pagingId).append(paginate);
                    console.log("Paging controls appended in drawCallback");
                } else {
                    console.error('Paging controls not found or empty in drawCallback');
                }
            } else {
                console.log("Redraw");
                // Redraw 단계에서는 페이징 컨트롤을 이동시키지 않음
            }
        }
    });

...

}

 

결과