jquery datatable에서 pagination 도입하기

문제 상황

1. 속도 (데이터의 개수가 늘어날수록 속도가 점점 느려지는 현상이 발생하고 있었다)
2. 수정이나 삭제시 현재 페이지를 기억하지 못하고 1페이지로 간다.

원인

1. datatable로 코드가 짜여져 있었는데, 테이블에 있는 모든 데이터를 가져온 후 pageLength의 값을 토대로 나누어서 보여지는 방식이다.
   게다가 500으로 때려박아져 있어서, 한 페이지에 500개씩 보였었다^^;;

2. 위와 같은 이유로 수정이나 삭제 시에도 현재 페이지가 아닌 전체 데이터를 가지고 오고 속도는 점점 더 거북이에 현재 페이지 기억도 못한다~!

수정 방안

1. ajax를 이용한 pagination을 구현한다.

		pageLength: 50,
		serverSide: true,
		processing: true

2. 위처럼 ajax 요청을 보내면 query에 아래의 값들이 함께 보내진다.

  // req.query
  const draw = parseInt(req.query.draw)
  const offset = parseInt(req.query.start)
  const limit = parseInt(req.query.pageSize)

response

    // return json response
   return res.json({ draw, recordsTotal, recordsFiltered, data });
   

새로고침을 막는 방법

-> ajax의 reload 를 false 옵션으로 바꾼다!
table.ajax.reload(null, false)

  if (actions.edit !== undefined) {
    modal.on('click', 'button#edit', () => {

      // 파라미터만 전송시
      if (actions.edit.serialize === 'Y') {
        const data = $(form).serializeArray()
        data.push({ name: 'admin_userid', value: user.userid })
        $.ajax({
          url: actions.edit.url.replace(':id', $('input[name=id]')[0].value),
          type: actions.edit.type,
          data: data,
          error: (error) => errorCodeAlert(list, error),
          success: () => {
            table.ajax.reload(null, false)
            modal.modal('hide')
          }
        })
      }

Reference
https://miyakita.tistory.com/147
https://zamezzz.tistory.com/310
https://programmerpsk.tistory.com/58
https://velog.io/@alstjd8826/TIL-jQuery-Bootstrap-Ajax-dataTable-pagination-search-sort
https://sir.kr/qa/370450
https://joyhong.tistory.com/104