Tutorial DataTables #3: Serverside

Edy Kurniawan 14 Maret 2024

DataTable adalah salah satu plugin JavaScript yang populer digunakan untuk membuat tabel interaktif dalam halaman web.

Fitur server-side dari DataTable memungkinkan penggunaan data yang besar tanpa mengorbankan kinerja.

Pada artikel ini akan membahas secara lengkap tentang DataTable server-side beserta langkah-langkah implementasinya dalam proyek web.

Apa itu DataTable Server-Side?

DataTable Server-Side adalah fitur yang memungkinkan kita untuk memuat dan menampilkan sebagian data dari server ke dalam tabel secara dinamis.

Alih-alih memuat semua data ke dalam tabel, hanya sebagian kecil dari data yang dimuat ke dalam tabel pada satu waktu, yang memungkinkan kinerja aplikasi tetap cepat meskipun memiliki dataset yang besar.

Baik teman-teman tak perlu berlama-lama, langsung saja kita mulai langkah-langkahnya.

Langkah-langkah Implementasi DataTable Server-Side

1. Persiapan Data di Server:

Sebelumnya, kita perlu mempersiapkan data di sisi server. Ini bisa dilakukan dengan menghubungkan ke database atau menggunakan data yang sudah ada di server.

Untuk praktik ini persiapan data kita menggunakan php dan database mysql, sebagai contoh mungkin struktur databasenya seperti dibawah ini

CREATE TABLE `tb_transaksi` (
  `transaksi_id` int(100) NOT NULL,
  `nama_operator` varchar(300) NOT NULL,
  `nama_bank` varchar(300) DEFAULT NULL,
  `nomor_rekening` varchar(300) NOT NULL,
  `pemilik_rekening` varchar(300) NOT NULL,
  `jumlah_pulsa` varchar(200) NOT NULL,
  `rate` varchar(100) NOT NULL,
  `jumlah_kirim` varchar(200) NOT NULL,
  `nomor_pengirim` varchar(300) NOT NULL,
  `nomor_penerima` varchar(300) NOT NULL,
  `status` enum('Sukses','Gagal') DEFAULT NULL,
  `created_at` datetime NOT NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

kemudian buat file index.php, dan disini kita akan membuat fungsi koneksi, sebagai koneksi php dengan database mysql

    function conn(){
        try {
            $conn = new PDO("mysql:host=localhost;dbname=projects_situsngoding", "root", "");
            $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            return $conn;
        } catch(PDOException $e) {
            echo "Connection failed: " . $e->getMessage();
            exit;
        }
    }

buat juga fungsi queryDatatable sebagai query untuk mengambil data dari database

    function queryDatatable($getNumRows=false){

        $length         = $_POST['length'];
        $start          = $_POST['start'];
        $search_value   = isset($_POST['search']['value']) && $_POST['search']['value'] ? $_POST['search']['value'] : null;

        $limit          = !$getNumRows && isset($length) && $length>=1 ? " LIMIT $length OFFSET $start" : null;
        $search         = $search_value ? " AND (nama_operator LIKE '%$search_value%' OR nama_bank LIKE '%$search_value%' OR pemilik_rekening LIKE '%$search_value%')" : null;
        
        $conn           = conn();
        return $getNumRows ? 
                    $conn->query("SELECT COUNT(*) FROM tb_transaksi WHERE transaksi_id IS NOT NULL $search")->fetchColumn():
                    $conn->query("SELECT * FROM tb_transaksi WHERE transaksi_id IS NOT NULL $search $limit")->fetchAll(PDO::FETCH_OBJ);

    }

Buat skrip di sisi server yang akan menangani permintaan data dari DataTable.

Skrip ini harus menerima parameter dari DataTable, seperti batas data yang diminta, pencarian, dan pengurutan.

Mengambil data dari sumber, misalnya database, sesuai dengan parameter yang diberikan.

Format data dan kirimkan balik ke DataTable di sisi klien dalam format output nya adalah json

    if(isset($_POST['draw']) && $_POST['draw'] !==null){
        header('Content-Type: application/json; charset=utf-8');

        $data       = queryDatatable();
        $totalData  = queryDatatable(true);
        echo json_encode([
            "draw"              => $_POST['draw'],
            "recordsTotal"      => $totalData,
            "recordsFiltered"   => isset($_POST['search']['value']) && $_POST['search']['value'] ? count($data) : $totalData,
            "data"              => $data
        ]);
        exit;
    }

2. Setup DataTable di Sisi Klien:

Unduh dan tambahkan library DataTable ke proyek web teman-teman atau bisa juga gunakan cdn seperti dibawah ini.

<link rel="stylesheet" href="https://cdn.datatables.net/2.0.2/css/dataTables.dataTables.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.0.2/js/dataTables.js"></script>

Buat elemen HTML <table> tempat tabel akan ditampilkan.

<table id="tablepulsa">
    <thead>
        <tr>
            <th>Nama Operator</th>
            <th>Jumlah Pulsa</th>
            <th>Pemilik Rekening</th>
            <th>Jumlah Transfer</th>
            <th>Nama Bank</th>
            <th>Status</th>
        </tr>
    </thead>
</table>

gunakan atribute id="tablepulsa" yang nantinya menjadi selector pada script di javascript

Inisialisasi DataTable dengan opsi konfigurasi yang diperlukan, termasuk konfigurasi server-side.

<script>
    var tablePulsa = new DataTable('#tablepulsa', {
        ajax: {
            url: "index.php",
            type: 'post',
        },
        columns: [
            { data: "nama_operator" },
            { data: "jumlah_pulsa" },
            { data: "pemilik_rekening" },
            { data: "jumlah_kirim" },
            { data: "nama_bank" },
            { data: "status" }
        ],
        processing: true,
        serverSide: true
    });
</script>

Dan ini adalah kode keseluruhan dari index.php

<?php
    
    function conn(){
        try {
            $conn = new PDO("mysql:host=localhost;dbname=projects_situsngoding", "root", "");
            $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            return $conn;
        } catch(PDOException $e) {
            echo "Connection failed: " . $e->getMessage();
            exit;
        }
    }

    function queryDatatable($getNumRows=false){

        $length         = $_POST['length'];
        $start          = $_POST['start'];
        $search_value   = isset($_POST['search']['value']) && $_POST['search']['value'] ? $_POST['search']['value'] : null;

        $limit          = !$getNumRows && isset($length) && $length>=1 ? " LIMIT $length OFFSET $start" : null;
        $search         = $search_value ? " AND (nama_operator LIKE '%$search_value%' OR nama_bank LIKE '%$search_value%' OR pemilik_rekening LIKE '%$search_value%')" : null;
        
        $conn           = conn();
        return $getNumRows ? 
                    $conn->query("SELECT COUNT(*) FROM tb_transaksi WHERE transaksi_id IS NOT NULL $search")->fetchColumn():
                    $conn->query("SELECT * FROM tb_transaksi WHERE transaksi_id IS NOT NULL $search $limit")->fetchAll(PDO::FETCH_OBJ);

    }

    if(isset($_POST['draw']) && $_POST['draw'] !==null){
        header('Content-Type: application/json; charset=utf-8');

        $data       = queryDatatable();
        $totalData  = queryDatatable(true);
        echo json_encode([
            "draw"              => $_POST['draw'],
            "recordsTotal"      => $totalData,
            "recordsFiltered"   => isset($_POST['search']['value']) && $_POST['search']['value'] ? count($data) : $totalData,
            "data"              => $data
        ]);
        exit;
    }

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Datatable - Serverside</title>

    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.2/css/dataTables.dataTables.css">
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.datatables.net/2.0.2/js/dataTables.js"></script>
            
</head>
<body>

    <h2>Datatable - Serverside</h2>
<table id="tablepulsa">
    <thead>
        <tr>
            <th>Nama Operator</th>
            <th>Jumlah Pulsa</th>
            <th>Pemilik Rekening</th>
            <th>Jumlah Transfer</th>
            <th>Nama Bank</th>
            <th>Status</th>
        </tr>
    </thead>
</table>
    <script>
        var tablePulsa = new DataTable('#tablepulsa', {
            ajax: {
                url: "index.php",
                type: 'post',
            },
            columns: [
                { data: "nama_operator" },
                { data: "jumlah_pulsa" },
                { data: "pemilik_rekening" },
                { data: "jumlah_kirim" },
                { data: "nama_bank" },
                { data: "status" }
            ],
            processing: true,
            serverSide: true
        });
    </script>
    
</body>
</html>

ketika dijalankan maka hasilnya akan seperti dibawah ini

kita bisa melihat bagaimana server-side datatable ini bekerja dengan cara masuk ke inspect element, kemudian pilh tab network.

lalu klik request index.php, karna kebetulan kita set url ajax nya ke index.php, klik tab payload.

kita bisa lihat ada cukup banyak parameter yang dikirimkan oleh DataTable, termasuk yang sudah kita handle sebelumnya adalah parameter untuk paginasi seperti start dan length, dan juga pada search atau untuk kolom pencariannya.

jika kita lihat hasil response yang diberikan seperti apa, kita bisa klik pada tab response atau preview. Kira-kira hasilnya seperti dibawah ini yaitu berupa data json.

{
    "draw": "1",
    "recordsTotal": 30475,
    "recordsFiltered": 30475,
    "data": [
        {
            "transaksi_id": 2,
            "nama_operator": "Telkomsel",
            "nama_bank": "BRI",
            "nomor_rekening": "298729872987",
            "pemilik_rekening": "Joko",
            "jumlah_pulsa": "1000000",
            "rate": "0.8",
            "jumlah_kirim": "800000",
            "nomor_pengirim": null,
            "nomor_penerima": null,
            "status": "Gagal",
            "created_at": "2023-09-27 10:57:53"
        },
        {
            "transaksi_id": 3,
            "nama_operator": "Tri",
            "nama_bank": "Mandiri",
            "nomor_rekening": "082029820802",
            "pemilik_rekening": "Edy Kurniawan",
            "jumlah_pulsa": "1000000",
            "rate": "0.8",
            "jumlah_kirim": "800000",
            "nomor_pengirim": null,
            "nomor_penerima": null,
            "status": "Gagal",
            "created_at": "2023-09-27 11:35:37"
        },
        {
            "transaksi_id": 4,
            "nama_operator": "Indosat",
            "nama_bank": "BNI",
            "nomor_rekening": "0189018901",
            "pemilik_rekening": "Jumono",
            "jumlah_pulsa": "2000000",
            "rate": "0.8",
            "jumlah_kirim": "1600000",
            "nomor_pengirim": null,
            "nomor_penerima": null,
            "status": "Gagal",
            "created_at": "2023-09-27 11:45:18"
        },
        {
            "transaksi_id": 5,
            "nama_operator": "Telkomsel",
            "nama_bank": "Bank Wasalam",
            "nomor_rekening": "0180180189178178",
            "pemilik_rekening": "Edy Kurniawan",
            "jumlah_pulsa": "10000000",
            "rate": "0.8",
            "jumlah_kirim": "8000000",
            "nomor_pengirim": null,
            "nomor_penerima": null,
            "status": "Gagal",
            "created_at": "2023-09-27 06:07:45"
        },
        {
            "transaksi_id": 6,
            "nama_operator": "Tri",
            "nama_bank": "BRI",
            "nomor_rekening": "298729872987",
            "pemilik_rekening": "Joko",
            "jumlah_pulsa": "100000",
            "rate": "0.8",
            "jumlah_kirim": "80000",
            "nomor_pengirim": null,
            "nomor_penerima": null,
            "status": "Gagal",
            "created_at": "2023-09-28 07:07:13"
        },
        {
            "transaksi_id": 7,
            "nama_operator": "Tri",
            "nama_bank": "BRI",
            "nomor_rekening": "298729872987",
            "pemilik_rekening": "Joko",
            "jumlah_pulsa": "100000",
            "rate": "0.8",
            "jumlah_kirim": "80000",
            "nomor_pengirim": null,
            "nomor_penerima": null,
            "status": "Gagal",
            "created_at": "2023-09-29 08:38:19"
        },
        {
            "transaksi_id": 8,
            "nama_operator": "Telkomsel",
            "nama_bank": "Mandiri",
            "nomor_rekening": "1234567890",
            "pemilik_rekening": "Timoti",
            "jumlah_pulsa": "100000",
            "rate": "0.8",
            "jumlah_kirim": "80000",
            "nomor_pengirim": null,
            "nomor_penerima": null,
            "status": "Gagal",
            "created_at": "2023-09-29 08:38:52"
        },
        {
            "transaksi_id": 9,
            "nama_operator": "Telkomsel",
            "nama_bank": "Mandiri",
            "nomor_rekening": "1234567890",
            "pemilik_rekening": "Timoti",
            "jumlah_pulsa": "100000",
            "rate": "0.8",
            "jumlah_kirim": "80000",
            "nomor_pengirim": null,
            "nomor_penerima": null,
            "status": "Gagal",
            "created_at": "2023-09-29 08:40:43"
        },
        {
            "transaksi_id": 10,
            "nama_operator": "Telkomsel",
            "nama_bank": "Mandiri",
            "nomor_rekening": "1234567890",
            "pemilik_rekening": "Timoti",
            "jumlah_pulsa": "200000",
            "rate": "0.8",
            "jumlah_kirim": "160000",
            "nomor_pengirim": null,
            "nomor_penerima": null,
            "status": "Gagal",
            "created_at": "2023-09-29 08:48:25"
        },
        {
            "transaksi_id": 11,
            "nama_operator": "Telkomsel",
            "nama_bank": "OVO",
            "nomor_rekening": "12209119",
            "pemilik_rekening": "Kiu Kiu",
            "jumlah_pulsa": "100000",
            "rate": "0.8",
            "jumlah_kirim": "80000",
            "nomor_pengirim": null,
            "nomor_penerima": null,
            "status": "Gagal",
            "created_at": "2023-09-29 08:49:18"
        }
    ]
}

kemudian jika kita pilih halaman ke 2 pada paginasinya ataupun melakukan search di kolom pencarian seperti gambar dibawah ini.

maka kita bisa lihat datatable akan melakukan request kembali ke server, dengan parameter yang sesuai dengan aksi yang kita berikan yaitu paginasi ataupun pencarian.

Kesimpulan

DataTable Server-Side adalah solusi yang kuat untuk menampilkan dan mengelola dataset besar dalam aplikasi web.

Dengan memuat data secara dinamis dari server, DataTable Server-Side memungkinkan pengembang untuk menciptakan pengalaman pengguna yang responsif dan efisien.

Dengan mengikuti langkah-langkah di atas, teman-teman dapat dengan mudah mengimplementasikan DataTable Server-Side dalam proyek web teman-teman.

930 x 180 AD PLACEMENT