Selamat siang kawan semua, kali ini saya posting tutorial bagaimana Membuat Responsive Table dengan Bootstrap dan Datatables ,PHP ,MYSQL yang pasti ini lanjutan tutorial dari artikel sebelumnya, yaitu
Tutorial Mempercantik Table dengan Bootstrap dan Datatables
Responsive pada table itu menurut saya perlu, karena ketika web kita di akses melalui perangkat selular akan terlihat sempurna, karena ukuran tampilan tabel akan mengikuti resolusi atau ukuran layar pada perangkat yang mengaksesnya.
Pada tutorial ini kita tidak banyak menambahkan coding pada project yang sudah kita buat sebelumnya, yang perlu di perhatikan untuk membuat table kita jadi responsive yaitu ada 2 file
- responsive.bootstrap.min.css
- dataTables.responsive.min.js
Kedua file diatas anda bisa mendownloadnya dibawah ini:
Download
responsive.bootstrap.min.css
dataTables.responsive.min.js
Setelah download kedua file diatas jangan lupa taruh pada folder assets/js/ untuk file
dataTables.responsive.min.js dan taruh pada folder assets/css/ untuk file
responsive.bootstrap.min.css
Sebelumnya anda harus membaca artikel sebelumnya dan mendownload file project yang ada di artikel
Tutorial Mempercantik Table dengan Bootstrap dan Datatables
Tahap pertama yang harus kita lakukan yaitu mengedit file header.php
Pada
header.php kita hanya menambahkan beberapa baris code dibawah ini:
<link rel="stylesheet" type="text/css" href="assets/css/responsive.bootstrap.min.css">
<script type="text/javascript" language="javascript" src="assets/js/dataTables.responsive.min.js"></script>
code diatas taruh di dalam <head> taruh disini </head> perhatikan gambar dibawah
Tahap kedua kita mengedit file getdata.php yang ada di dalam folder php/getdata.php
Pada file
getdata.php kita hanya mengedit baris ini:
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
tambahkan dt-responsive nowrap pada class tabelnya seperti dibawah ini
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
Dan coba lihat hasilnya ;
Jika belum nampak coba kecilkan browser anda atau akses web anda dari handphone/tablet.
Selamat mencoba.
Artikel keren lainnya:
kenapa filenya tidak bisa di download
ReplyDeletedownload disini http://gowirecard.tk/demo/bootstrapdatatables/download.php webnya expire..
Deletelink downloadnya tolong diperbaharui ya bro..
ReplyDeletelink download nyo broh.. kok ke pembesaran p3nis sih..?
ReplyDeleteTerimakasih gan atas kotennya semangat terus dalam membuat kontennya gan oiya nama saya Dicky Sanjaya dari STMIK Atma Luhur dan ini website kampus saya https://www.atmaluhur.ac.id/
ReplyDeleteWahh syukaa banget akutuh bang🤗 sangat jelas dan mudah dipelajari, kenalin nama aku larasati mahasiswa ISB Atma luhur Pangkalpinang hayukk mampir diwebsite kampus aku https://www.atmaluhur.ac.id/
ReplyDeleteTrimakasih
filenya tidak bisa di download
ReplyDeleteSangat bermanfaat dan sangat membantu.
ReplyDeleteterimakasih kak atas ilmunya , semogah dapat berguna
perkenalkan nama saya irfandi amanda putra dari ISB Atma Luhur