Cara Menggunakan Datatables Server Side

7 min read Jul 26, 2024

Cara Menggunakan DataTables Server-Side dengan Keyword

DataTables adalah library JavaScript populer untuk membuat tabel data interaktif yang responsif. Dalam kasus data yang besar, menggunakan server-side processing dapat sangat meningkatkan kinerja dan pengalaman pengguna. Pada artikel ini, kita akan membahas cara mengimplementasikan DataTables server-side dengan menggunakan keyword.

Apa itu Server-Side Processing?

Server-side processing di DataTables berarti bahwa semua pemrosesan data, seperti filtering, sorting, paging, dan searching, dilakukan di server, bukan di browser. Ini mengurangi beban browser dan meningkatkan kinerja, terutama untuk tabel dengan data besar.

Langkah-Langkah Implementasi

Siapkan Data: Pastikan data yang ingin Anda tampilkan tersedia di server. Data ini dapat berasal dari database, file, atau sumber data lainnya.

Konfigurasi DataTables: Dalam kode HTML Anda, konfigurasikan DataTables dengan opsi serverSide diaktifkan. Anda juga perlu mengatur beberapa opsi penting lainnya:

$(document).ready(function() {
    $('#example').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "your_server_side_script.php", // URL ke skrip server-side Anda
            "type": "POST", // Metode HTTP untuk permintaan
        },
        "columns": [
            { "data": "column1" }, 
            { "data": "column2" },
            // ...
        ]
    });
});

Buat Skrip Server-Side: Buat skrip server-side (misalnya your_server_side_script.php) yang akan memproses data dari server dan mengembalikan data yang diformat dalam format JSON yang dapat dibaca oleh DataTables. Skrip ini harus melakukan hal berikut:

Mendapatkan data: Mengambil data dari sumber data.
Memproses data: Melakukan pemrosesan data berdasarkan permintaan DataTables, seperti filtering, sorting, paging, dan searching.
Mengembalikan data: Mengembalikan data yang diproses dalam format JSON.

Berikut adalah contoh skrip server-side menggunakan PHP:

connect_error) {
    die("Koneksi Gagal: " . $conn->connect_error);
}

// Mendapatkan data dari DataTables
$draw = $_POST['draw'];
$start = $_POST['start'];
$length = $_POST['length'];
$search = $_POST['search']["value"];
$orderColumn = $_POST['order'][0]['column'];
$orderDir = $_POST['order'][0]['dir'];

// Query untuk mendapatkan data
$sql = "SELECT * FROM your_table"; 

// Filter
if ($search) {
    $sql .= " WHERE column1 LIKE '%$search%' OR column2 LIKE '%$search%'"; // Ganti 'column1' dan 'column2' dengan kolom yang ingin dicari
}

// Sorting
$sql .= " ORDER BY " . $orderColumn . " " . $orderDir;

// Paging
$sql .= " LIMIT $start, $length";

// Eksekusi query dan dapatkan data
$result = $conn->query($sql);

// Jumlah total data
$totalRecords = $conn->query("SELECT COUNT(*) FROM your_table")->fetch_row()[0];

// Data yang difilter
$totalRecordsFiltered = $conn->query($sql)->num_rows;

// Data dalam array
$data = array();
while ($row = $result->fetch_assoc()) {
    $data[] = array(
        "column1" => $row["column1"],
        "column2" => $row["column2"],
        // ...
    );
}

// Data dalam format JSON
$output = array(
    "draw" => $draw,
    "recordsTotal" => $totalRecords,
    "recordsFiltered" => $totalRecordsFiltered,
    "data" => $data
);

// Kirim data dalam format JSON
echo json_encode($output);

$conn->close();
?>

Gunakan Keyword untuk Filtering:
- Pada skrip server-side Anda, gunakan keyword yang diterima dari DataTables (misalnya $_POST['search']["value"]) untuk melakukan filtering data.
- Anda dapat menggunakan operator LIKE dengan wildcard '%' untuk mencari data yang cocok.
Integrasikan dengan DataTables: Setelah skrip server-side Anda siap, pastikan URL-nya benar dalam konfigurasi DataTables di kode HTML Anda.

Contoh Implementasi

Berikut adalah contoh sederhana tentang bagaimana cara menggunakan DataTables server-side dengan keyword:

HTML:




    DataTables Server-Side
    
    
    



    
        
            
                Nama
                Umur
                Kota

PHP (server_side_script.php):

Dalam contoh ini, keyword yang dimasukkan oleh pengguna dalam kolom pencarian akan digunakan untuk memfilter data yang ditampilkan dalam tabel DataTables.

Keuntungan Server-Side Processing

Performa yang lebih baik: Mengurangi beban browser dan meningkatkan responsivitas, terutama untuk tabel dengan data besar.
Pengalaman pengguna yang lebih baik: Tabel tetap responsif bahkan saat data sedang diproses.
Keamanan: Meminimalkan risiko SQL injection dan kerentanan keamanan lainnya.

Dengan menggunakan DataTables server-side dan mengimplementasikan filtering dengan keyword, Anda dapat membuat tabel data interaktif yang lebih responsif, aman, dan efisien.

Cara Menggunakan Datatables Server Side