(Datatable) 데이터 테이블 페이지 매김 처리

전제 조건: 필수 콘텐츠

1. 총 행 수

2. 현재 페이지

3. 총 페이지 수

4. 현재 페이지에 표시되는 행

5. DB에 요청할 ROW order

내용은 다음과 같습니다.

여기에 주어진 값은 #1과 #5입니다.

// 전체 테이블 개수
SELECT counst(*) as Total_count FROM table;

// 동적 쿼리문
SELECT * FROM table LIMIT ?, 40;
// 기본적으로 40개만 호출하고, 순번을 0~39개까지만 가져온다는 구문.

// SQL에서 동적 쿼리문 테스트 구문.
SET @num = 0;
PREPARE Query From 'SELECT * FROM table LIMIT ?, 40;'
EXECUTE Query using @num;

1호점 앞. (매회 통화 시 안내를 통해 재통화 여부를 확인하세요.)

5번은 db에 기본값이 0으로 설정되어 있으며 업데이트가 필요한 경우 해당 limit 행을 앞에 추가하여 다음 순차 호출 시 전달합니다.

앞면에는 다음과 같이 작성합니다.

let table = $('#datatable').Datatable();
let rows_start = 0;
// 페이지 버튼 클릭 시 이벤트 핸들러입니다.
$(document).on('page.dt', '#datatable', function () {
    const { length, pages, page } = table?.page?.info();
    /**
     * @page 현재 페이지(0부터 시작)
     * @pages 총 페이지
     * @length 테이블 페이지 row
     * @currentPage 유저가 보는 현재 테이블 페이지 보정값
     * @currentMAXRow 해당 페이지의 최대 ROW 개수
     * @row_start db에서 주는 순번.
    */
    let currentPage = page+1;
    let currentMAXRow = currentPage * length;
    /**
     * 현재 페이지에서 보여주는 Row와 전체 값을 비교하고
     * 마지막 페이지인 경우 새로운 값 추가 API.
     */
    if(table_rows > currentMAXRow && pages == currentPage) {
        row_start = Number(row_start) + 40; // row_start가 db에서 주는 경우 문자열일수도 있어 Number 타입변경 진행.

        let data = {
            row_start
        };
        let ret = ajax.get('api', data); // 그냥 귀찮아서 대충 적음.
        if(ret) {
            ret.map((el) => {
                const { id, content, tests } = el;
                    
                table.row.add((
                    id, content, tests
                )).draw(false);
            });
        } else {
            alert(ret?.e)
        }
    }
});

소통 부분은 대충 썼는데 나름대로 쓸만할 것 같습니다.

끝까지.