Advanced Data Table MySQL

Salam blogger indonesia, kali ini saya akan berbagi data tabel yang menggunakan database mysql, saya persembahkan untuk sobat saya +Ryan Syahputera dan mas +Heri Assidiqi . Langsung saja ikuti tutorial berikut untuk studi kasus menggunakan datatabel dengan database MySQL. Jika sobat ingin yang menggunakan tampilan bootsrap silakan cek disini

Langkah pertama kita buat dulu database dengan nama datatabelmysql, disini saya menggunakan potongan database dari data wilayah indonesia. Kemudian copas script berikut pada tab SQL.

CREATE TABLE IF NOT EXISTS `inf_lokasi` (
  `lokasi_ID` int(11) NOT NULL AUTO_INCREMENT,
  `lokasi_kode` varchar(50) NOT NULL DEFAULT '',
  `lokasi_nama` varchar(100) NOT NULL DEFAULT '',
  `lokasi_propinsi` int(2) NOT NULL,
  `lokasi_kabupatenkota` int(2) unsigned zerofill DEFAULT NULL,
  `lokasi_kecamatan` int(2) unsigned zerofill NOT NULL,
  `lokasi_kelurahan` int(4) unsigned zerofill NOT NULL,
  PRIMARY KEY (`lokasi_ID`),
  KEY `lokasi_kode` (`lokasi_kode`),
  KEY `lokasi_propinsi` (`lokasi_propinsi`),
  KEY `lokasi_kabupatenkota` (`lokasi_kabupatenkota`),
  KEY `lokasi_kecamatan` (`lokasi_kecamatan`),
  KEY `lokasi_kelurahan` (`lokasi_kelurahan`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=68427 ;

--
-- Dumping data untuk tabel `inf_lokasi`
--

INSERT INTO `inf_lokasi` (`lokasi_ID`, `lokasi_kode`, `lokasi_nama`, `lokasi_propinsi`, `lokasi_kabupatenkota`, `lokasi_kecamatan`, `lokasi_kelurahan`) VALUES
(1, '11.00.00.0000', 'Nanggroe Aceh Darussalaam', 11, 00, 00, 0000),
(2, '12.00.00.0000', 'Sumatra Utara', 12, 00, 00, 0000),
(3, '13.00.00.0000', 'Sumatra Barat', 13, 00, 00, 0000),
(4, '14.00.00.0000', 'Riau', 14, 00, 00, 0000),
(5, '15.00.00.0000', 'Jambi', 15, 00, 00, 0000),
(6, '16.00.00.0000', 'Sumatra Selatan', 16, 00, 00, 0000),
(7, '17.00.00.0000', 'Bengkulu', 17, 00, 00, 0000),
(8, '18.00.00.0000', 'Lampung', 18, 00, 00, 0000),
(9, '19.00.00.0000', 'Kep. Bangka Belitung', 19, 00, 00, 0000),
(10, '21.00.00.0000', 'Kep. Riau', 21, 00, 00, 0000),
(11, '31.00.00.0000', 'DKI Jakarta', 31, 00, 00, 0000),
(12, '32.00.00.0000', 'Jawa Barat', 32, 00, 00, 0000),
(13, '33.00.00.0000', 'Jawa Tengah', 33, 00, 00, 0000),
(14, '34.00.00.0000', 'DI Yogyakarta', 34, 00, 00, 0000),
(15, '35.00.00.0000', 'Jawa Timur', 35, 00, 00, 0000),
(16, '36.00.00.0000', 'Banten', 36, 00, 00, 0000),
(17, '51.00.00.0000', 'Bali', 51, 00, 00, 0000),
(18, '52.00.00.0000', 'Nusa Tenggara Barat', 52, 00, 00, 0000),
(19, '53.00.00.0000', 'Nusa Tenggara Timur', 53, 00, 00, 0000),
(20, '61.00.00.0000', 'Kalimantan Barat', 61, 00, 00, 0000),
(21, '62.00.00.0000', 'Kalimantan Tengah', 62, 00, 00, 0000),
(22, '63.00.00.0000', 'Kalimantan Selatan', 63, 00, 00, 0000),
(23, '64.00.00.0000', 'Kalimantan Timur', 64, 00, 00, 0000),
(24, '71.00.00.0000', 'Sulawesi Utara', 71, 00, 00, 0000),
(25, '72.00.00.0000', 'Sulawesi Tengah', 72, 00, 00, 0000),
(26, '73.00.00.0000', 'Sulawesi Selatan', 73, 00, 00, 0000),
(27, '74.00.00.0000', 'Sulawesi Tenggara', 74, 00, 00, 0000),
(28, '75.00.00.0000', 'Gorontalo', 75, 00, 00, 0000),
(29, '81.00.00.0000', 'Maluku', 81, 00, 00, 0000),
(30, '82.00.00.0000', 'Maluku Utara', 82, 00, 00, 0000),
(31, '91.00.00.0000', 'Papua', 91, 00, 00, 0000),
(32, '92.00.00.0000', 'Irian Jaya Barat', 92, 00, 00, 0000),
(33, '91.14.00.0000', 'KABUPATEN  KEEROM', 91, 14, 00, 0000),
(34, '91.15.00.0000', 'KABUPATEN  SORONG SELATAN', 91, 15, 00, 0000),
(35, '91.16.00.0000', 'KABUPATEN  RAJA AMPAT', 91, 16, 00, 0000),
(36, '91.17.00.0000', 'KABUPATEN  PEGUNUNGAN BINTANG', 91, 17, 00, 0000),
(37, '91.18.00.0000', 'KABUPATEN YAHUKIMO  ', 91, 18, 00, 0000),
(38, '91.19.00.0000', 'KABUPATEN  TOLIKARA', 91, 19, 00, 0000),
(39, '91.21.00.0000', 'KABUPATEN  KAIMANA', 91, 21, 00, 0000),
(40, '91.22.00.0000', 'KABUPATEN  BOVEN DIGUL', 91, 22, 00, 0000),
(41, '91.23.00.0000', 'KABUPATEN  MAPPI', 91, 23, 00, 0000),
(42, '91.24.00.0000', 'KABUPATEN  ASMAT', 91, 24, 00, 0000),
(43, '91.25.00.0000', 'KABUPATEN SUPIORI', 91, 25, 00, 0000),
(44, '91.26.00.0000', 'KABUPATEN  TELUK WONDAMA', 91, 26, 00, 0000),
(45, '91.71.00.0000', 'KOTA JAYAPURA', 91, 71, 00, 0000),
(46, '91.72.00.0000', 'KOTA  SORONG ', 91, 72, 00, 0000),
(47, '14.01.00.0000', 'KABUPATEN KAMPAR', 14, 01, 00, 0000),
(48, '14.02.00.0000', 'KABUPATEN INDRAGIRI HULU', 14, 02, 00, 0000),
(49, '14.03.00.0000', 'KABUPATEN BENGKALIS', 14, 03, 00, 0000),
(50, '14.04.00.0000', 'KABUPATEN INDRAGIRI HILIR', 14, 04, 00, 0000),
(51, '14.05.00.0000', 'KABUPATEN PELALAWAN', 14, 05, 00, 0000),
(52, '14.06.00.0000', 'KABUPATEN ROKAN HULU', 14, 06, 00, 0000),
(53, '14.07.00.0000', 'KABUPATEN ROKAN HILIR', 14, 07, 00, 0000),
(54, '14.08.00.0000', 'KABUPATEN SIAK', 14, 08, 00, 0000),
(55, '14.09.00.0000', 'KABUPATEN KUANTAN SINGINGI', 14, 09, 00, 0000),
(56, '14.71.00.0000', 'KOTA PEKANBARU', 14, 71, 00, 0000),
(57, '14.72.00.0000', 'KOTA DUMAI', 14, 72, 00, 0000),
(58, '36.71.00.0000', 'KOTA TANGGERANG', 36, 71, 00, 0000),
(59, '36.72.00.0000', 'KOTA  CILEGON', 36, 72, 00, 0000),
(60, '63.01.00.0000', 'KABUPATEN TANAH LAUT', 63, 01, 00, 0000),
(61, '63.02.00.0000', 'KABUPATEN KOTA BARU', 63, 02, 00, 0000),
(62, '63.03.00.0000', 'KABUPATEN BANJAR', 63, 03, 00, 0000),
(63, '63.04.00.0000', 'KABUPATEN BARITO KUALA', 63, 04, 00, 0000),
(64, '63.05.00.0000', 'KABUPATEN TAPIN', 63, 05, 00, 0000),
(65, '63.06.00.0000', 'KABUPATEN HULU SUNGAI SELATAN', 63, 06, 00, 0000),
(66, '63.07.00.0000', 'KABUPATEN HULU SUNGAI TENGAH', 63, 07, 00, 0000),
(67, '63.08.00.0000', 'KABUPATEN HULU SUNGAI UTARA', 63, 08, 00, 0000),
(68, '63.09.00.0000', 'KABUPATEN TABALONG', 63, 09, 00, 0000),
(69, '63.10.00.0000', 'KABUPATEN TANAH BUMBU', 63, 10, 00, 0000),
(70, '63.11.00.0000', 'KABUPATEN BALANGAN', 63, 11, 00, 0000),
(71, '63.71.00.0000', 'KOTA BANJARMASIN', 63, 71, 00, 0000),
(72, '63.72.00.0000', 'KOTA BANJAR BARU', 63, 72, 00, 0000),
(73, '62.01.00.0000', 'KABUPATEN KOTA WARINGIN BARAT', 62, 01, 00, 0000),
(74, '62.02.00.0000', 'KABUPATEN KOTA WARINGIN TIMUR', 62, 02, 00, 0000),
(75, '62.03.00.0000', 'KABUPATEN KAPUAS', 62, 03, 00, 0000),
(76, '62.04.00.0000', 'KABUPATEN BARITO SELATAN', 62, 04, 00, 0000),
(77, '62.05.00.0000', 'KABUPATEN BARITO UTARA', 62, 05, 00, 0000),
(78, '62.06.00.0000', 'KABUPATEN KATINGAN', 62, 06, 00, 0000),
(79, '62.07.00.0000', 'KABUPATEN SERUYAN', 62, 07, 00, 0000),
(80, '62.08.00.0000', 'KABUPATEN SUKAMARA', 62, 08, 00, 0000),
(81, '62.09.00.0000', 'KABUPATEN LAMANDAU', 62, 09, 00, 0000),
(82, '62.10.00.0000', 'KABUPATEN GUNUNG MAS', 62, 10, 00, 0000),
(83, '62.11.00.0000', 'KABUPATEN PULANG PISAU', 62, 11, 00, 0000),
(84, '62.12.00.0000', 'KABUPATEN  MURUNG RAYA', 62, 12, 00, 0000),
(85, '62.13.00.0000', 'KABUPATEN  BARITO TIMUR', 62, 13, 00, 0000),
(86, '62.71.00.0000', 'KOTA PALANGKARAYA', 62, 71, 00, 0000),
(87, '18.01.00.0000', 'KABUPATEN LAMPUNG SELATAN', 18, 01, 00, 0000),
(88, '18.02.00.0000', 'KABUPATEN LAMPUNG TENGAH', 18, 02, 00, 0000),
(89, '18.03.00.0000', 'KABUPATEN LAMPUNG UTARA', 18, 03, 00, 0000),
(90, '18.04.00.0000', 'KABUPATEN LAMPUNG BARAT', 18, 04, 00, 0000),
(91, '18.05.00.0000', 'KABUPATEN TULANG BAWANG', 18, 05, 00, 0000),
(92, '18.06.00.0000', 'KABUPATEN TANGGAMUS', 18, 06, 00, 0000),
(93, '18.07.00.0000', 'KABUPATEN LAMPUNG TIMUR', 18, 07, 00, 0000),
(94, '18.08.00.0000', 'KABUPATEN WAY KANAN', 18, 08, 00, 0000),
(95, '18.71.00.0000', 'KOTA BANDAR LAMPUNG', 18, 71, 00, 0000),
(96, '18.72.00.0000', 'KOTA METRO', 18, 72, 00, 0000),
(97, '73.01.00.0000', 'KABUPATEN SELAYAR', 73, 01, 00, 0000),
(98, '73.02.00.0000', 'KABUPATEN BULUKUMBA', 73, 02, 00, 0000),
(99, '73.03.00.0000', 'KABUPATEN BANTAENG', 73, 03, 00, 0000),
(100, '73.04.00.0000', 'KABUPATEN JENEPONTO', 73, 04, 00, 0000);

Langkah kedua kita buat file index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Data Tables</title>
 <style type="text/css" title="currentStyle">  
  @import "css/demo_table_jui.css";
  @import "css/jquery-ui-1.8.4.custom.css";
 </style>
 <script type="text/javascript" language="javascript" src="js/jquery.js"></script>
 <script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
 <script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
   oTable = $('#example').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers"
   });
  } );
 </script>
</head>
<body>
 <?php
  mysql_connect('localhost','root','') or die ("koneksi gagal");
  mysql_select_db('datatabelmysql')or die ("database tidak ditemukan");
 ?>
 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
 <thead>
  <tr>
   <th>No</th>
   <th>Lokasi ID</th>
   <th>Lokasi Kode</th>
   <th>Lokasi Nama</th>
   <th>Lokasi Propinsi</th>
   <th>Lokasi Kabupaten</th>
   <th>Lokasi Kecamatan</th>
   <th>Lokasi Kelurahan</th>
  </tr>
 </thead>
 <tbody>
  <?php
  $query = mysql_query("SELECT * FROM inf_lokasi");
  $no = 1;
  while($data=mysql_fetch_array($query)){
   echo "<tr class='grade'>
    <td>$no.</td>
    <td>$data[lokasi_ID]</td>
    <td>$data[lokasi_kode]</td>
    <td>$data[lokasi_nama]</td>
    <td>$data[lokasi_propinsi]</td>
    <td>$data[lokasi_kabupatenkota]</td>
    <td>$data[lokasi_kecamatan]</td>
    <td>$data[lokasi_kelurahan]</td>
    
   </tr>";
   $no++;
  }
  ?>
 </tbody>
 </table>
</body> 
</html>