jquery Datatables 대량 페이징 방법 정리(paging)

DataTables에서 대용량 리스트를 서버와 연동하여 페이징 처리하는 방법

DataTables를 사용할 때 데이터가 많으면(예: 수천~수백만 개의 행) 클라이언트에서 모든 데이터를 로드하는 것은 비효율적입니다. 이런 경우 서버사이드 페이징(Server-side Processing) 방식을 사용하여 필요한 데이터만 불러오는 것이 좋습니다.


---

1. 서버사이드 페이징 개요

서버사이드 페이징을 사용하면 DataTables가 특정 페이지의 데이터만 요청하고, 서버에서 필요한 부분만 응답합니다. 이를 위해 AJAX를 이용하며, 요청 시 다음과 같은 파라미터가 서버로 전달됩니다.

클라이언트에서 서버로 전달되는 요청 값


---

2. 클라이언트 측(DataTables) 설정

JavaScript 코드

$(document).ready(function() {
    $('#example').DataTable({
        "processing": true,  // 로딩 표시
        "serverSide": true,  // 서버사이드 처리 활성화
        "ajax": {
            "url": "server_processing.php", // 데이터를 가져올 서버 URL
            "type": "POST"  // 요청 방식 (POST 또는 GET)
        },
        "columns": [
            { "data": "id" },   // 첫 번째 컬럼: id
            { "data": "name" }, // 두 번째 컬럼: name
            { "data": "age" },  // 세 번째 컬럼: age
            { "data": "job" }   // 네 번째 컬럼: job
        ],
        "pageLength": 10, // 페이지당 10개 데이터 표시
        "ordering": true, // 정렬 활성화
        "searching": true // 검색 기능 활성화
    });
});


---

3. 서버 측(PHP) 구현 예제

서버에서는 클라이언트의 요청을 받아 데이터베이스에서 필요한 데이터를 검색하고 JSON 형식으로 반환해야 합니다.

PHP 예제 (MySQL)

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test_db";

// 데이터베이스 연결
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("연결 실패: " . $conn->connect_error);
}

// DataTables에서 보낸 요청 데이터
$draw = $_POST['draw'];       // 요청 번호
$start = $_POST['start'];     // 시작 인덱스
$length = $_POST['length'];   // 가져올 데이터 개수
$search = $_POST['search']['value'];  // 검색어

// 총 데이터 개수 조회
$totalQuery = "SELECT COUNT(*) as total FROM users";
$totalResult = $conn->query($totalQuery);
$totalRow = $totalResult->fetch_assoc();
$totalRecords = $totalRow['total'];

// 검색 조건이 있을 경우
$searchQuery = "";
if (!empty($search)) {
    $searchQuery = " WHERE name LIKE '%$search%' OR job LIKE '%$search%'";
}

// 필터링된 데이터 개수 조회
$filteredQuery = "SELECT COUNT(*) as total FROM users $searchQuery";
$filteredResult = $conn->query($filteredQuery);
$filteredRow = $filteredResult->fetch_assoc();
$filteredRecords = $filteredRow['total'];

// 데이터 조회 쿼리 (페이징 적용)
$dataQuery = "SELECT * FROM users $searchQuery LIMIT $start, $length";
$dataResult = $conn->query($dataQuery);

$data = array();
while ($row = $dataResult->fetch_assoc()) {
    $data[] = $row;
}

// JSON 형식으로 응답
echo json_encode([
    "draw" => intval($draw),
    "recordsTotal" => intval($totalRecords),
    "recordsFiltered" => intval($filteredRecords),
    "data" => $data
]);

$conn->close();
?>


---

4. 정렬 기능 추가

DataTables에서 정렬을 요청하면 order 값이 서버로 전달됩니다. 이를 반영하여 정렬 기능을 구현할 수 있습니다.

PHP 정렬 추가

// 정렬 컬럼 및 방향 설정
$columns = array("id", "name", "age", "job"); // 컬럼 배열
$orderColumn = $columns[$_POST['order'][0]['column']]; // 정렬할 컬럼
$orderDir = $_POST['order'][0]['dir']; // 정렬 방향 (asc 또는 desc)

// 데이터 조회 쿼리 (정렬 포함)
$dataQuery = "SELECT * FROM users $searchQuery ORDER BY $orderColumn $orderDir LIMIT $start, $length";


---

5. 데이터 개수가 많을 때 최적화 방법

대량 데이터를 처리할 때는 성능을 최적화해야 합니다.

1) 인덱스 설정

검색 및 정렬이 자주 사용되는 컬럼(예: name, job)에 인덱스를 추가하면 성능이 향상됩니다.

CREATE INDEX idx_name ON users(name);
CREATE INDEX idx_job ON users(job);

2) 페이징 최적화 (MySQL)

MySQL에서는 LIMIT을 사용할 때 OFFSET이 클수록 성능이 떨어집니다. 이를 방지하려면 ID 기반 페이징을 사용하는 것이 좋습니다.

// ID 기반 페이징
$lastId = isset($_POST['lastId']) ? intval($_POST['lastId']) : 0;
$dataQuery = "SELECT * FROM users WHERE id > $lastId ORDER BY id ASC LIMIT $length";

3) 캐싱 활용

데이터가 자주 변경되지 않는다면 Redis 또는 Memcached 같은 캐시 시스템을 이용하면 빠른 응답이 가능합니다.


---

6. 서버에서 JSON 응답 예제

클라이언트에서 DataTables가 AJAX 요청을 하면, 서버는 아래와 같은 JSON 데이터를 반환해야 합니다.

{
    "draw": 1,
    "recordsTotal": 1000,
    "recordsFiltered": 500,
    "data": [
        { "id": 1, "name": "홍길동", "age": 30, "job": "개발자" },
        { "id": 2, "name": "이순신", "age": 45, "job": "장군" },
        { "id": 3, "name": "김유신", "age": 40, "job": "장군" }
    ]
}


---

7. 정리

1. DataTables의 serverSide: true 옵션을 활성화하여 AJAX로 데이터를 요청.


2. 서버에서 start, length, search, order 등의 요청 데이터를 처리하여 필요한 데이터만 반환.


3. MySQL에서 페이징, 검색, 정렬을 최적화하기 위해 인덱스 추가, ID 기반 페이징, 캐싱 활용.


4. 서버는 JSON 형식으로 응답하여 recordsTotal, recordsFiltered, data 를 반환.



이 방식으로 구현하면 대량의 데이터를 빠르게 페이징할 수 있습니다.