Menampilkan Data Dengan Ajax dan Bootstrap Table Wenzhixin

Menampilkan data dengan ajax ke dalam table -  Mungkin sudah ada yang menggunakan plugin gratis ini untuk digunakan pada project anda. Bootstrap-table wenzhixin adalah salah satu alternatif yang bisa anda gunakan sebagai tabel selain datatable seperti biasanya. 

Entah apakah karena saya yang tidak terlalu tahu terlalu jauh mengenai datatable atau gimana saya juga bingung. Akan tetapi, selama ini pada project yang saya buat saya selalu menggunakan plugin tabel ini sebagai pengganti Datatable yang sering digunakan pada template-template html bootstrap. 

Dari segi penggunaan, menurut pendapat saya juga cukup mudah dan didukung dengan ekstensi yang bisa kita gunakan sesuai kebutuhan, seperti export, DOM data menggunakan json dan sebagainya. 

Plugin ini gratis ! Jika anda ingin mencoba anda bisa mengunjungi langsung di situsnya disini

Nah, pada artikel ini saya akan sedikit mencontohkan cara load data atau DOM data menggunakan PHP MySQL, json dan bootstrap-table wenzhixin. 

Pertama, pastikan anda sudah mendownload bootstrap-table tersebut bisa repository githubnya  github.com/wenzhixin/bootstrap-table

Setelah itu, pada file .php anda tambahkan css dan js bootstrap-table seperti dibawah ini:

<link rel="stylesheet" href="path/to/directory/bootstrap-table/dist/bootstrap-table.min.css">
<script src="path/to/directory/bootstrap-table/dist/bootstrap-table.min.js"></script>

 

Jika sudah, maka kita perlu mengaktifkan agar bootstrap table dapat berjalan dengan fungsi seperti dibwah ini : 

<script>
$('#table').bootstrapTable();
</script>

 

Nah, selanjutnya kita coba membuat tabel dan fungsi ajax untuk me-load datanya. 

<table class="table table-hover"
id="table" 
data-search="true"
data-toggle="table"
data-pagination="true" 
data-page-size="10"
data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="id">Id</th>
<th data-field="nama">Nama</th>
<th data-field="email">Group</th>
</tr>
</thead>
</table>

 

$( document ).ready(function(){
function loadData() {
    $.ajax({
        type: "GET",
        url: "get_data.php",
        success: function (data) {
                console.log(data);
                $('#table').bootstrapTable('load', data);
            },
        error: function(data){
            console.log(data);
        }
    }); 
}
});

 

Kemudian, kita buat query untuk mengambil data dari database dan kita beri nama pada file tersebut misal get_data.php, dan silahkan ketikan kode dibawah : 

<?php
$koneksi = mysqli_connect("localhost","root","","xxxx");

// Check connection
if (mysqli_connect_errno()){
	echo "Koneksi database gagal : " . mysqli_connect_error();
}

$query = mysqli_query($koneksi,"SELECT * FROM users");
$arr =array();
while($r = mysqli_fetch_array($query)){
    $temp = array(
        "id" => $r['id'],
        "nama" => $r['nama'],
        "email" => $r['email']
        );
        array_push($arr, $temp);
}

echo json_encode($arr);
?>

 

Nah, jika berhasil seharusnya data sudah tampil seperti dibawah ini:

menampilkan data json dengan ajax dan bootstrap-table wenzhixn

 

Nah, bagaimana ? cukup mudah bukan. Selamat mencoba... 

Top