[Datatable] datatable 페이지네이션 처리

전제 조건 : 필요내용

1. 전체 Rows 개수

2. 현재 페이지

3. 총 페이지

4. 현재 페이지 내에서 보여지는 Rows

5. DB에 요청할 ROW 순번

 

내용은 아래와 같습니다.

여기서 주는 값은 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번을 Front에 저장한다.(매번 호출시 해당 정보를 통해서 재호출할 것인지 여부 파악).

5번은 db에선 기본값을 0으로 설정하고, 갱신이 필요할 경우 Front로 해당 limit Row 더하여 다음 순번 호출시 전달.

 

프론트에선 이렇게 쓴다.

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('호출실패')
        }
    }
});

통신 부분은 대충 적었는데, 알아서 쓰리라고 본다.

 

이상 끝.