Membuat DataTables Server-Side Dengan PHP dan MySql

Anda dapat membuat fitur penampilan data menggunakan DataTables dengan mode server-side. DataTables adalah sebuah plugin JavaScript yang memungkinkan Anda dengan mudah menampilkan dan mengelola data tabel di halaman web Anda. Mode server-side digunakan ketika Anda memiliki sejumlah besar data yang tidak praktis untuk dimuat sekaligus. Dalam mode ini, DataTables akan mengirim permintaan ke server untuk mengambil data saat pengguna mengakses atau memfilter data.

Langkah-langkahnya adalah sebagai berikut:

1. Persiapan Database:

Pastikan bahwa Anda sudah memiliki database yang berisi data yang ingin Anda tampilkan. Misalnya, kita akan menggunakan MySQL. Buatlah tabel dalam database Anda dan isilah dengan beberapa data contoh.

2. Instalasi DataTables:

Unduh DataTables dari situs resmi DataTables atau gunakan CDN. Tambahkan tautan ke CSS dan JavaScript DataTables dalam halaman Anda:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>

3. Buat HTML dan JavaScript:

Buat elemen HTML yang akan menampilkan tabel dan tambahkan JavaScript untuk menginisialisasi DataTables dalam mode server-side. Pastikan Anda sudah menyertakan elemen HTML seperti ini dalam halaman Anda:

<table id="myTable" class="display" style="width:100%"></table>

Kemudian, tambahkan kode JavaScript berikut:

$(document).ready(function() {
      $('#myTable').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "server-side-script.php" // Gantilah dengan URL skrip server-side Anda
       });
});

Pastikan bahwa Anda sudah memasukkan jQuery sebelum menambahkan kode di atas.

4. Buat Skrip Server-Side (PHP):

Buat skrip PHP yang akan menangani permintaan dari DataTables. Ini adalah tempat Anda akan mengambil data dari database dan mengirimkannya sebagai respons. Misalnya, Anda dapat membuat file "server-side-script.php" seperti berikut:

<?php
      $connection = new PDO('mysql:host=localhost;dbname=nama_database', 'username', 'password');
      json_encode($output);
?>

Pastikan Anda mengganti "nama_database," "username," "password," dan detail lain sesuai dengan database Anda.

5. Tampilkan Data:

Ketika Anda membuka halaman dengan HTML, JavaScript, dan skrip server-side yang telah Anda buat, DataTables akan memuat dan menampilkan data dari server sesuai dengan permintaan. DataTables juga memberikan berbagai fitur pencarian, pengurutan, dan penampilan data yang nyaman bagi pengguna.