Membuat Responsive Table dengan Bootstrap dan Datatables PHP MYSQL

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.

DEMO

Selamat mencoba.

8 Tanggapan untuk "Membuat Responsive Table dengan Bootstrap dan Datatables PHP MYSQL"

UnknownJuly 29, 2016 at 4:49 PM
kenapa filenya tidak bisa di download
UnknownDecember 7, 2016 at 8:14 PM
link downloadnya tolong diperbaharui ya bro..
AnonymousAugust 27, 2017 at 10:20 AM
link download nyo broh.. kok ke pembesaran p3nis sih..?
Dicky SanjayaMarch 24, 2020 at 7:38 AM
Terimakasih 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/
LarasatiJuly 1, 2020 at 11:33 AM
Wahh 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/

Trimakasih
UnknownSeptember 15, 2020 at 9:12 PM
filenya tidak bisa di download
irfanOctober 4, 2020 at 8:49 AM
Sangat bermanfaat dan sangat membantu.
terimakasih kak atas ilmunya , semogah dapat berguna
perkenalkan nama saya irfandi amanda putra dari ISB Atma Luhur

Contributors

Sunday, February 28, 2016