Cara Membuat Table di dalam Modal SweetAlert2

Halo sobat netizen kali ini saya akan sharing bagaimana cara membuat table di dalam Modal SweetAlert2, nah buat temen – temen yang belum tahu caranya bisa ikuti tutorial ini supaya bisa. Contoh menampilkanya seperti gambar di bawah ini.

Sebelum memulai tutorialnya ada baiknya sobat mengetahui dulu apa itu SweetAlert2, SweetAlert2 ini merupakan plugin atau javascript atau pihak ketiga (third Party) yang biasa digunakan untuk mempercantik tampilan sebuah web dalam memberikan informasi atau notifikasi, plugin ini juga mirip dengan Modal Bootstrap hanya saja perbedaan bahasa yaitu php dan javascript.

Untuk Proses Instal Pluginnya sobat bisa menggunakan 2 cara yaitu :

Instal di Local Server alias Mendownloadnya terlebih dahulu dengan cara mengetikan perintah $npm install sweetalert2 di terminal code editing sobat.
Menggunakan CDN atau akses secara Online menggunakan Script ini <script src=“//cdn.jsdelivr.net/npm/sweetalert2@11”></script>.

Secara Pribadi saya lebih suka menggunakan CDN agar lebih praktis dan tidak perlu ribet mendownload dan memasukanya ke local Server, Sekarang sobat tinggal pilih saja mana yang lebih sobat sukai.

Langsung saja bagaimana cara membuatnya sobat buat dulu sebuah file php dengan nama index.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>Tes Modal SweetAlert dengan Table</title>
    <meta content="" name="description">

    <meta content="" name="keywords">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
    <!-- SweetAlert -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <!-- Jquery UI -->
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">


</head>

<body>
<!-- Membuat Tombol Penampil -->
    <button id="cari" name="cari" class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center" onclick="proses()">Tampilkan Modal <i class="bi bi-search"></i></button>
</body>

</html>

<script>
    function proses() {
        Swal.fire({
            width: 800,
            title: '<strong>Data Ditemukan</strong>',
            icon: 'info',
            html: `<table id="detail" class="table table-bordered table-responsive" border=1 responsive>
        <thead>
            <tr>
                <th>Nama</th>
                <th>Tempat Lahir</th>
                <th>Tanggal Lahir</th>
                <th>No Handphone</th>
                <th>Alamat</th>
                <th>Website</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            ` + '<td>' + "PUTU ARTHA" + '</td>' +
                '<td>' + "MATARAM" + '</td>' +
                '<td>' + "12 DESEMBER 1980" + '</td>' +
                '<td>' + "085328238884" + '</td>' +
                '<td>' + "RT. 004 RW. 006 - DENPASAR" + '</td>' +
                '<td>' + "https://mr-leong.com" + '</td>' +
                `</tr>
</tbody>
</table>` + `<table id="tindak_lanjut" class="table table-bordered " border=1>
        <thead>
            <tr>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            ` + '<td align="left">' + "Lajang" + '</td>' +
                `</tr>
</tbody>
</table>` + ` </tbody> </table>`,
            showCloseButton: true,
            showCancelButton: false,
            focusConfirm: false,
            confirmButtonAriaLabel: 'Thumbs up, great!',
            cancelButtonText: '<i class="fa fa-thumbs-down"></i>',
            cancelButtonAriaLabel: 'Thumbs down'
        })
    }
</script>

Setelah mengcopy code di atas sobat jalankan di localhost atau XAMPP dan sejenis software untuk membuat server lokal maka nanti akan muncul sebuah tombol yang apabila ditekan keluarlah modal SweetAlert2.

Yang sobat perlu perhatikan adalah di bagian Function Proses() disana sobat bisa modifkasi kodenya sesuai keinginan sobat. Nah sampai disini sobat sudah pasti bisa membuat modal SweetAlert2 yang berisi table di dalamnya untuk koneksi databasenya dan mengirim data ke modal cukup mudah sobat tinggal menggunakan AJAX saja mengirim datanya, Jika sobat masih bingung sobat bisa bertanya melalui kolom komentar. Selamat Mencoba dan Salam Mr Leong.

Bagikan Postingan ini :