Menampilkan data di DataTable dengan json

BrazenElixir September 22, 2018
Pertama tama buat koneksi, bisa di lihat pada postingan berikut Click Here, kemudian buat table kurang lebih seperti di bawah ini 

Gambar 0.1 Struktur table

dan buat data table kurang lebih tampilan nya seperti di bawah ini, untuk plug-in nya bisa di lihat di sini DataTable

Gambar 0.2 Data Master Buku

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 <div class="box-body">
              <table id="master_buku" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>KODE BUKU</th>
                  <th>ISBN</th>
                  <th>NAMA BUKU</th>
                  <th>PENGARANG</th>
                  <th>PENERBIT</th>
                  <th>ACTION</th>
                </tr>
                </thead>
                <tbody id="ListMasterBuku">
                </tbody>
              </table>
            </div>

pada bagian tag <tbody> tambahkan id dengan nama ListMasterBuku untuk inisialisasi di js, selanjut nya buat fungsi PHP dengan nama GetAllDataBuku.php untuk code nya bisa di lihat di bawah ini


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<?php
include '../koneksi.php'; 

mysqli_set_charset($conn, 'utf8');
$query = mysqli_query($conn, 'select * from tb_buku');
while($row = mysqli_fetch_assoc($query)) {
 $data[] = $row;
}
   
$json = json_encode($data);
echo $json;
?>

jalankan fungsi GetAllDataBuku.php di browser dengan cara ini

Gambar 0.3 Output JSON

jika hasilnya seperti gambar berikut berarti sudah benar, lalu buat 1 file js dengan nama master_buku.js dan buat code js seperti di bawah ini 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function GetAllMasterBuku() {
    var result;
    $.ajax({
        async: false,
        url: 'function/GetAllDataBuku.php',
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataFilter: function (data) { return data; },
        success: function (data) {
           // result = jQuery.parseJSON(data);

          //  var data2 = JSON.parse(data);
            MasterBuku(data);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
           console.log("Error")
        }
    });
    return result;
}

//ResultFromAjax
function MasterBuku(data) {
    var rows = '';
    $.each(data, function (key, value) {
        rows = rows + "<tr>";
        rows = rows + "<td>" + value.Kode_Buku + "</td>";
        rows = rows + "<td>" + value.Isbn + "</td>";
        rows = rows + "<td>" + value.Nama_Buku + "</td>";
        rows = rows + "<td>" + value.Pengarang + "</td>";
        rows = rows + "<td>" + value.Penerbit + "</td>";
        rows = rows + "<td> <button class='btn btn-warning' onClick=\"GetBukuByID('" + value.Id_Buku + "')\">Edit</button> <button class='btn btn-danger'  onClick=\"DeleteBuku('" + value.Id_Buku + "')\">Delete</button> </td>";
        rows = rows + "</tr>";
    });

    $("#ListMasterBuku").html(rows);
}


$(document).ready(function () {
 GetAllMasterBuku();

});

pada saat membuka browse GetAllMasterBuku() di panggi dengan document ready pada function GetAllMasterBuku() adalah perintah ajax untuk mengambil data data file GetAllDataBuku.php yg tadi di buat, kemudian terdapat result json dan di kirimkan parameter data yang berisi data buku ke function MastrerBuku(data) dan di sisipan per record ke ID html yg benama ListMasterBuku sehingga membentuk per rows di datatable. kemudian coba masukan data secara manual di php myadmin

Gambar 0.4 Masukan Data Baru

Maka data akan bertambah jika berhasil


Gambar 0.5 Hasil data
Selamat Mencoba . . . . 



Tags
Reactions

Posting Komentar

0 Komentar