Cara Pasang Jquery Datatable di Framework Codeigniter

Halo sobat sobat dumenity, selamat datang di tutorial tutorial pemrogramman website dumet school, kali ini kita akan belajar Cara Pasang Jquery Datatable di Framework Codeigniter, jquery datatable ini sangat berguna untuk membuat data-data kita menjadi rapi di dalam sebuah table, dimana table tersebut bisa kita search secara realtime, bisa kita urutkan ascending atau descending, bisa kita atur tampilan jumlah row yang di tampilkan, mulai dari 10 data sampai lebih, dan ada pagination nya juga. menarik bukan teman teman. yuk langsung saja kita praktekan.

saya asumsikan kalian sudah mengerti tentang dasar dasar framework codeigniter ini yah. misalnya configurasi database, membuat model, controller, helper, dan passing data ke view yah teman teman. jadi kali ini saya tidak menjelaskan itu.

sebalumnya kalian buat database, tabel seperti berikut

insert table provinsi tersebut

INSERT INTO `provinsi` VALUES
  ('11', 'ACEH'),
  ('12', 'SUMATERA UTARA'),
  ('13', 'SUMATERA BARAT'),
  ('14', 'RIAU'),
  ('15', 'JAMBI'),
  ('16', 'SUMATERA SELATAN'),
  ('17', 'BENGKULU'),
  ('18', 'LAMPUNG'),
  ('19', 'KEPULAUAN BANGKA BELITUNG'),
  ('21', 'KEPULAUAN RIAU'),
  ('31', 'DKI JAKARTA'),
  ('32', 'JAWA BARAT'),
  ('33', 'JAWA TENGAH'),
  ('34', 'DI YOGYAKARTA'),
  ('35', 'JAWA TIMUR'),
  ('36', 'BANTEN'),
  ('51', 'BALI'),
  ('52', 'NUSA TENGGARA BARAT'),
  ('53', 'NUSA TENGGARA TIMUR'),
  ('61', 'KALIMANTAN BARAT'),
  ('62', 'KALIMANTAN TENGAH'),
  ('63', 'KALIMANTAN SELATAN'),
  ('64', 'KALIMANTAN TIMUR'),
  ('65', 'KALIMANTAN UTARA'),
  ('71', 'SULAWESI UTARA'),
  ('72', 'SULAWESI TENGAH'),
  ('73', 'SULAWESI SELATAN'),
  ('74', 'SULAWESI TENGGARA'),
  ('75', 'GORONTALO'),
  ('76', 'SULAWESI BARAT'),
  ('81', 'MALUKU'),
  ('82', 'MALUKU UTARA'),
  ('91', 'PAPUA BARAT'),
  ('94', 'PAPUA');

kalian buat controller dengan nama Datatable. dan buat seperti di bawah ini

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Datatable extends CI_Controller {

	public function index()
	{
		$this->load->database();

		$data['provinsi'] = $this->db->get('provinsi')->result();

		$this->load->view('index', $data);
	}
}

dan setelah itu kita buat file bernama index.php di view.

dan didalam nya ketika kode berikut

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Welcome to CodeIgniter</title>
	<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
	
</head>
<body>
	<div>
		<h1>JQuery Datatable</h1>
		<table id="myTable" class="display" width="100%">
			<thead>
				<tr>
					<th>Id Provinsi</th>
					<th>Nama Provinsi</th>
				</tr>
			</thead>
			<tbody>
				<?php foreach ($provinsi as $prov) { ?>
					<tr>
						<td width="20%"><?php echo $prov->id ?></td>
						<td width="80%"><?php echo $prov->nama_provinsi ?></td>
					</tr>
				<?php } ?>
			</tbody>
		</table>
	</div>
<!--taruh java script di sini -->
</body>
</html>

untuk javascript nya ketikan seperti berikut

dan coba jalankan di localhost

nah seperti yang saya sebutkan sebelumnya, coba kalian lakukan pencarian data, misalnya saya akan mencari data sulawesi maka hasil nya hanya data sulawesi yang tampil di tabel,

tentunya ini sangat berguna sekali yah teman teman, sekian tutorial Cara Pasang Jquery Datatable di Framework Codeigniter

Cara Pasang Jquery Datatable di Framework Codeigniter

Kategori