Impor file csv ke tabel data jquery menggunakan php ajax

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

Table of Contents Show

jQuery Datatables Pemrosesan sisi server dengan PHP dan MySQL
Indeks lengkap. html
ambil_catatan. php

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', '[email protected]'),
(2, 'Mark Higgins', '[email protected]'),
(3, 'Austin Joseph', '[email protected]'),
(4, 'Sean Kennedy', '[email protected]'),
(5, 'Rose Harris', '[email protected]'),
(6, 'Lilly Whites', '[email protected]'),
(7, 'Jennifer Winters', '[email protected]'),
(8, 'Michael Bruce', '[email protected]'),
(9, 'John Alex', '[email protected]'),
(10, 'Demi Milan', '[email protected]'),
(11, 'Austin Joseph', '[email protected]'),
(12, 'Mark Higgins', '[email protected]'),
(13, 'Sean Kennedy', '[email protected]');

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

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<script src="https://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>

Harap dicatat bahwa saya telah memuat file data dari cdn tetapi Anda dapat mengunduh dan menggunakannya dari server Anda sendiri

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 perilakunya

Indeks 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="https://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,