Pada postingan kali ini, saya akan membagikan contoh bagaimana mengimplementasikan jquery Datatables ajax di PHP dan MySQL menggunakan PDO. Jika Anda memiliki ratusan ribu catatan atau bahkan jutaan catatan Anda tidak ingin memuatnya sekaligus ke HTML Anda seperti yang kami lakukan pada contoh kami sebelumnya karena dapat memperlambat kinerja server Anda. Tetapi menggunakan ajax Anda tidak perlu memuat semua catatan ke Datatable Anda karena itu diberi nomor halaman dan Anda hanya menunjukkan apa yang kami butuhkan
Hai. Dalam tutorial ini mari kita lihat pemrosesan sisi server dari tabel data jquery menggunakan php, mysql dan ajax. Jika Anda tidak tahu, Datatables adalah plugin jquery luar biasa yang mengubah tabel html sederhana menjadi kisi data kaya fitur dengan fungsi tambahan seperti pencarian instan, paginasi, penyortiran multi-kolom, dll. Tabel berfungsi dengan banyak sumber data seperti DOM, AJAX, dll. , dan mendukung pemrosesan sisi klien dan server. Kita telah melihat tentang tabel data dengan data json dan di sini kita akan melihat tentang pemrosesan sisi server
Untuk skrip server, kita akan menggunakan PHP dan MySQL sebagai sumber data
jQuery Datatables Pemrosesan sisi server dengan PHP dan MySQL
Mari kita lihat cara mengambil catatan dari sisi server menggunakan permintaan ajax dan mencantumkannya di tabel data. Untuk menggunakan dalam contoh ini, kita membutuhkan database dummy. Jadi mari kita buat dulu
Langkah 1) Buat Database MySQL
SQL berikut akan membuat database mysql, tabel dan beberapa contoh record di dalamnya. Jalankan skrip ini di phpmyadmin untuk membuat database
CREATE DATABASE `my_demo`; USE `my_demo`; CREATE TABLE `customers` ( `id` int(8) NOT NULL AUTO_INCREMENT, `name` varchar(50) NOT NULL, `email` varchar(60) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=14 ; INSERT INTO `customers` (`id`, `name`, `email`) VALUES (1, 'Jim Connor', 'jimconnor@yahoo.com'), (2, 'Mark Higgins', 'mark.higgins21@yahoo.com'), (3, 'Austin Joseph', 'austin.joseph.boston@gmail.com'), (4, 'Sean Kennedy', 'seankennedy01@gmail.com'), (5, 'Rose Harris', 'roseharris@gmail.com'), (6, 'Lilly Whites', 'lillywhites@outlook.com'), (7, 'Jennifer Winters', 'jennie.winters001@gmail.com'), (8, 'Michael Bruce', 'michaelbruce78@yahoo.com'), (9, 'John Alex', 'johnalex@example.com'), (10, 'Demi Milan', 'demimilan@gmail.com'), (11, 'Austin Joseph', 'austin.joseph.boston@gmail.com'), (12, 'Mark Higgins', 'mark.higgins21@yahoo.com'), (13, 'Sean Kennedy', 'seankennedy.boss@outlook.com');Langkah 2) Muat Perpustakaan CSS dan JS yang Diperlukan
Selanjutnya muat file CSS dan JS dari plugin datatables. Dan Anda juga harus menyertakan 'jquery. js' sebelum memuat 'jquery. tabel data. js' karena bergantung pada jquery
Langkah 3) Buat Tabel HTML
Kemudian buat markup html untuk tabel tersebut. Ini akan bertindak sebagai placeholder untuk tabel data. Cukup tambahkan tajuk kolom yang sesuai untuk tabel
<table id="customersTable" class="display" width="100%" cellspacing="0"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Email</th> </tr> </thead> </table>Langkah 4) Panggilan AJAX
Selanjutnya, buat permintaan ajax ke skrip php untuk mendapatkan data dari sisi server. Anda juga harus memetakan kolom tabel dengan bidang dalam database untuk mengisi tabel html
$(document).ready(function() { $('#customersTable').dataTable({ "processing": true, "ajax": "fetch_data.php", "columns": [ {data: 'id'}, {data: 'name'}, {data: 'email'} ] }); }); Metode dataTable() akan menginisialisasi tabel data dan dilengkapi dengan berbagai opsi. Dengan mengatur parameter yang berbeda, kita dapat mengontrol perilakunyaIndeks lengkap. html
<!DOCTYPE html> <html> <head> <title>Datatables Example using PHP and MySQL</title> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css"> </head> <body> <h2 style="text-align:center;">Datatables Server-Side Example</h2> <table id="customersTable" class="display" width="100%" cellspacing="0"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Email</th> </tr> </thead> </table> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script> <script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js" charset="utf8" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#customersTable').dataTable({ "processing": true, "ajax": "fetch_data.php", "columns": [ {data: 'id'}, {data: 'name'}, {data: 'email'} ] }); }); </script> </body> </html> _Langkah 5) Ambil Catatan dari Database dan Kembalikan sebagai JSON
Akhirnya skrip server. Ini akan berkomunikasi dengan database mysql backend, mengambil catatan, menyandikannya ke json bersama dengan nilai lain yang diperlukan dan mengirimkannya kembali ke front-end
ambil_catatan. php
<?php // db settings $hostname = 'localhost'; $username = 'root'; $password = ''; $database = 'my_demo'; // db connection $con = mysqli_connect($hostname, $username, $password, $database) or die("Error " . mysqli_error($con)); // fetch records $sql = "select id, name, email from customers"; $result = mysqli_query($con, $sql); while($row = mysqli_fetch_assoc($result)) { $array[] = $row; } $dataset = array( "echo" => 1, "totalrecords" => count($array), "totaldisplayrecords" => count($array), "data" => $array ); echo json_encode($dataset); ?>Kami memiliki semua kode di tempat. Sekarang jalankan index. html dan Anda dapat melihat kisi data seperti ini,
Anda dapat memfilter catatan menggunakan kotak pencarian instan di bagian atas dengan cara ini,
- Autocomplete Textbox dari Database di PHP, jQuery dan MySQL
- Tambahkan/Hapus Textbox secara dinamis menggunakan jQuery, PHP & Bootstrap
Itu menjelaskan tentang menampilkan tabel data jquery dengan catatan basis data menggunakan php dan mysql. Meskipun tabel data berfungsi cukup baik dengan sumber data klien seperti json, JS Array, dll. , ketika Anda ingin bekerja dengan kumpulan data yang sangat besar, menggunakan pemrosesan sisi server adalah rute terbaik. Saya harap tutorial ini bermanfaat bagi Anda. Tolong, bagikan di lingkaran sosial Anda jika Anda menyukainya