• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Jaranguda

belajar mengajar

  • Home
  • Pasang Iklan
  • Tentang
Home » Menampilkan data CodeIgniter dengan Datatables

Menampilkan data CodeIgniter dengan Datatables

Last Updated on 28 July 2019 By tommy Leave a Comment

Menambahkan datatables di view CodeIgniter, sebenarnya cukup mudah. Yang perlu di perhatikan adalah Datatables mengharuskan tabel mengikuti standar tabel seperti dibawah ini

<table>
	<thead>
		<tr>
			<th> </th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td> </td>
		</tr>
	</tbody>
</table>

contoh sederhana kita akan membuat tabel user, pertama ditampilkan di tabel dari view CodeIgniter, setelah itu kita ubah menjadi Datatables agar anda bisa melihat perubahannya.

Cara dibawah ini menggunakan client side, jika jumlah data yang ditampilkan diatas 1000 baris akan terasa lambat karena semua data harus di download terlebih dahulu, solusinya adalah menggunakan server side yang didukung secara default oleh Datatables.

1. Database

Import contoh database dibawah ini

DROP TABLE IF EXISTS `user`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `user` (
  `id` INT(11) DEFAULT NULL,
  `first_name` VARCHAR(50) DEFAULT NULL,
  `last_name` VARCHAR(50) DEFAULT NULL,
  `email` VARCHAR(50) DEFAULT NULL,
  `password` VARCHAR(50) DEFAULT NULL,
  `country` VARCHAR(50) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
/*!40101 SET character_set_client = @saved_cs_client */;
 
--
-- Dumping data for table `user`
--
 
LOCK TABLES `user` WRITE;
/*!40000 ALTER TABLE `user` DISABLE KEYS */;
INSERT INTO `user` VALUES (1,'Winston','Bebis','wbebis0@cbslocal.com','RCOWs2uJq7','Indonesia'),(2,'Ethelyn','Henrys','ehenrys1@reverbnation.com','ZwirrolHMukN','Russia'),(3,'Vittorio','Vellender','vvellender2@cornell.edu','hz7uqNpZ','Brazil'),(4,'Gearalt','Scinelli','gscinelli3@indiegogo.com','noer33vU','Poland'),(5,'Fey','Stevens','fstevens4@eepurl.com','j1afGfuw7Ve7','China'),(6,'Bentley','Ditt','bditt5@biblegateway.com','BUR6fv0A','Portugal'),(7,'Tonya','Rye','trye6@fda.gov','X5tmZ9jDcS','China'),(8,'Juline','Roughey','jroughey7@nydailynews.com','kjRRO45jeD0w','Indonesia'),(9,'Alic','Wevell','awevell8@nydailynews.com','TzSWEfZWy8vQ','China'),(10,'Norbie','Gelder','ngelder9@feedburner.com','4jYZi2rj','Albania'),(11,'Emmalynn','Gabler','egablera@un.org','Uri553LlQO','Sweden'),(12,'Sibelle','Bernardo','sbernardob@blogspot.com','Lbiznun','Ukraine'),(13,'Laurie','Spooner','lspoonerc@artisteer.com','IpkvoEL96BXc','China'),(14,'Othilie','Eckly','oecklyd@studiopress.com','27kZgqGFJMmL','Venezuela'),(15,'Artus','Pennycook','apennycooke@webmd.com','QOs7uRh5yLKB','Mali'),(16,'Vincenz','Osler','voslerf@multiply.com','Gu5QCXHQ','China'),(17,'Isidro','Hemphall','ihemphallg@yellowpages.com','NQ4KEqzc','France'),(18,'Pinchas','Le Guin','pleguinh@tamu.edu','ZsfzyYqo','China'),(19,'Rorie','Aleksandrev','raleksandrevi@tumblr.com','dstH8RB5','South Africa'),(20,'Mayer','Pitkethly','mpitkethlyj@flickr.com','OHjZtbmX5gt','Canada'),(21,'Karol','Baiden','kbaidenk@census.gov','EZ1iIWBYV1p6','Morocco'),(22,'Franciska','Peeters','fpeetersl@moonfruit.com','QJX2b8DfGs','Russia'),(23,'Chlo','Kennford','ckennfordm@goo.gl','NU8YjWQF','Portugal'),(24,'Wolfie','Lownds','wlowndsn@imdb.com','1D00dQaOaO','Greece'),(25,'Sherri','Hellens','shellenso@whitehouse.gov','Ee7nls3','Poland'),(26,'Emory','Semark','esemarkp@unesco.org','VAIBfR8uO','Tajikistan'),(27,'Jakie','Hulks','jhulksq@example.com','jI5ylhi','China'),(28,'Leticia','Mathie','lmathier@weather.com','euFzcmE','Indonesia'),(29,'Raimondo','Milier','rmiliers@symantec.com','3fNmX69MpoiF','Poland'),(30,'Fawn','Cush','fcusht@hexun.com','odFVlovDiSj9','China'),(31,'Lanita','Ropking','lropkingu@google.es','Me0ePL926NR','South Africa'),(32,'Addi','Dadson','adadsonv@noaa.gov','GnqyVJ','Ivory Coast'),(33,'Rutter','Fiennes','rfiennesw@pagesperso-orange.fr','UujqfWj0','Indonesia'),(34,'Cristina','Martinet','cmartinetx@un.org','VYiAS2','China'),(35,'Shep','Rennenbach','srennenbachy@123-reg.co.uk','UhRqfKs','Indonesia'),(36,'Nikolaos','Gladdish','ngladdishz@youku.com','d9U0oMHX','Philippines'),(37,'Sumner','Luker','sluker10@liveinternet.ru','x0lr2Xidf','Peru'),(38,'Hasheem','Bagguley','hbagguley11@harvard.edu','JBadgt1fFi4D','China'),(39,'Leonid','Neller','lneller12@goo.gl','yTXyEiRGlGH','Zimbabwe'),(40,'Emogene','Antonin','eantonin13@army.mil','1ocwURtMp','Ecuador'),(41,'Charisse','Snell','csnell14@chron.com','SoWALHqNw','Poland'),(42,'Arnaldo','Inchboard','ainchboard15@princeton.edu','YPHzFyOdm','Thailand'),(43,'Maren','Hatherley','mhatherley16@cornell.edu','kXIVTe1qXL4g','Philippines'),(44,'Faith','Mc Coughan','fmccoughan17@ucla.edu','btiT7SM','Ukraine'),(45,'Frasco','Kevern','fkevern18@unblog.fr','Jb2fWT3kkTgP','China'),(46,'Trumann','Ball','tball19@moonfruit.com','EjLb9Y','Norway'),(47,'Vanya','Lightwood','vlightwood1a@zdnet.com','emywNQV','Russia'),(48,'Brendan','Dallmann','bdallmann1b@twitter.com','MfUwKhXYcjg','Canada'),(49,'Mord','Colam','mcolam1c@buzzfeed.com','m09cvGDyKf','China'),(50,'Sascha','Hogbin','shogbin1d@forbes.com','XWUYViRNu8','Palestinian Territory');
/*!40000 ALTER TABLE `user` ENABLE KEYS */;
UNLOCK TABLES;

2. Model

Buat model untuk menampilkan semua data yang ada di tabel user. Beri nama User_model.php

<?php
class User_model extends CI_Model {
	public function __construct()
	{
		$this->load->database();
	}
	public function all()
	{
		$data = $this->db->query("SELECT * from user");
		return $data->result();
	}
}

2. Controller

Buat controller baru, dengan nama User.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
 
class User extends CI_Controller {
 
	public function __construct()
	{
		parent::__construct();
		$this->load->helper("url");
		$this->load->model('user_model');
	}
 
	public function index()
	{
		$data['user'] = $this->user_model->all();
		$this->load->view('user', $data);
	}
}

2. View

Buat view untuk menampilkan data user diatas kedalam tabel, beri nama user.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tutorial Codeigniter - JARANGUDA.COM</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
  </head>
  <body>
  <section class="section">
    <div class="container">
      <table class="table is-narrow" id="tabeluser">
        <thead>
        <tr>
          <th>ID</th>
          <th>Nama Lengkap</th>
          <th>Email</th>
          <th>Negara</th>
          <th>Password</th>
        </tr>
        </thead>
        <tbody>
        <?php
        foreach ($user as $u) {
          echo "<tr>";
          echo "<td>$u->id</td>";
          echo "<td>$u->first_name $u->last_name</td>";
          echo "<td>$u->email</td>";
          echo "<td>$u->country</td>";
          echo "<td>$u->password</td>";
          echo "</tr>";
        }
        ?>
        </tbody>
      </table>
      <p class="subtitle">
        Tutorial CodeIgniter <strong>jaranguda.com</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

Buka di browser http://localhost/User
tampilan tabel codeigniter

Untuk merubah tabel diatas menjadi datatables, ubah view user.php menjadi

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tutorial Codeigniter - JARANGUDA.COM</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
  </head>
  <body>
  <section class="section">
    <div class="container">
      <table class="table is-narrow" id="tabeluser">
        <thead>
        <tr>
          <th>ID</th>
          <th>Nama Lengkap</th>
          <th>Email</th>
          <th>Negara</th>
          <th>Password</th>
        </tr>
        </thead>
        <tbody>
        <?php
        foreach ($user as $u) {
          echo "<tr>";
          echo "<td>$u->id</td>";
          echo "<td>$u->first_name $u->last_name</td>";
          echo "<td>$u->email</td>";
          echo "<td>$u->country</td>";
          echo "<td>$u->password</td>";
          echo "</tr>";
        }
        ?>
        </tbody>
      </table>
      <p class="subtitle">
        Tutorial CodeIgniter <strong>jaranguda.com</strong>!
      </p>
    </div>
  </section>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
      $('#tabeluser').DataTable();
  });
  </script>
</html>

tampilan sesudah menggunakan datatables
tabel datatables di codeigniter

Last Updated on 28 July 2019


Tulisan menarik lainnya

  • Menampilkan data MySQL ke Table dengan PHP

    Tutorial kali ini adalah cara Menampilkan data MySQL ke Table HTML dengan script PHP. Berikut…

  • Menampilkan Nomor Baris di Datatables

    Setelah sebelumnya saya menulis tutorial Menggunakan Datatables di Laravel 5.1 LTS, kali ini adalah cara…

  • Menampilkan Data Dari Database MySQL ke Combobox dengan PHP

    Pada tutorial kali ini, kita akan menampilkan data dari database kedalam combobox. Buat sebuah database…

  • Membuat Pencarian dengan CodeIgniter 3

    Script searching/pencarian ini adalah porting dari script Pencarian Laravel 5, jadi databasenya diambil dari sana…

Filed Under: PHP

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Pencarian

Terbaru

  • Koneksi Download/Upload Indihome Hancur Lebur Desember 2019
  • Belajar Membuat Aplikasi Android: Jenis-Jenis Layout di Android Studio
  • Balifiber Memblokir Port SSH/22
  • Cara Install dan Konfigurasi DNSCrypt 2.0.13 di Fedora 31
  • Bayar Tagihan Balifiber lewat KLIKBCA Internet Banking

Komentar

  • tommy on Password Terbaru Router Alcatel Lucent Bali Fiber
  • tommy on Kemana Menghilangnya Saldo BCA 50 ribu
  • tommy on Solusi Modem Indihome ZTE F609 ISP Timed Out
  • tommy on Kemana Menghilangnya Saldo BCA 50 ribu
  • antipecah on Password Terbaru Router Alcatel Lucent Bali Fiber

Tulisan Populer

  • Password Terbaru ZTE F609 Indihome 661,221 views
  • Cara Setting Manual Modem GPON ZTE F609 Indihome 159,231 views
  • Cara Setting Wireless ZTE F609 Indihome 156,349 views
  • Akses UseeTV Indihome via Wireless ZTE F609 109,846 views
  • Password Superadmin Huawei HG8245A 92,543 views
  • Cara Reset Password ZTE F609 Indihome 88,092 views
  • Mengaktifkan Port LAN di Huawei HG8245 Indihome 87,804 views
  • Mengubah Modem Wireless Router Menjadi Access Point 69,632 views
  • Cara Setting DHCP Server Modem/Router ZTE F609 64,679 views
  • Cara Mengatasi Gagal Login Wifi @wifi.id 62,616 views

Kategori

  • Delphi
  • dll
  • Gambas
  • Internet
  • Java
  • Lazarus
  • Linux
  • PHP
  • Review
  • Teknologi
© 2019. Jaranguda
  • Linux
  • PHP
  • Internet
  • Teknologi
  • Delphi
  • Gambas
  • Java