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

Jaranguda

Belajar Mengajar

  • Home
  • Sponsor/Jasa
  • Tentang

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','[email protected]','RCOWs2uJq7','Indonesia'),(2,'Ethelyn','Henrys','[email protected]','ZwirrolHMukN','Russia'),(3,'Vittorio','Vellender','[email protected]','hz7uqNpZ','Brazil'),(4,'Gearalt','Scinelli','[email protected]','noer33vU','Poland'),(5,'Fey','Stevens','[email protected]','j1afGfuw7Ve7','China'),(6,'Bentley','Ditt','[email protected]','BUR6fv0A','Portugal'),(7,'Tonya','Rye','[email protected]','X5tmZ9jDcS','China'),(8,'Juline','Roughey','[email protected]','kjRRO45jeD0w','Indonesia'),(9,'Alic','Wevell','[email protected]','TzSWEfZWy8vQ','China'),(10,'Norbie','Gelder','[email protected]','4jYZi2rj','Albania'),(11,'Emmalynn','Gabler','[email protected]','Uri553LlQO','Sweden'),(12,'Sibelle','Bernardo','[email protected]','Lbiznun','Ukraine'),(13,'Laurie','Spooner','[email protected]','IpkvoEL96BXc','China'),(14,'Othilie','Eckly','[email protected]','27kZgqGFJMmL','Venezuela'),(15,'Artus','Pennycook','[email protected]','QOs7uRh5yLKB','Mali'),(16,'Vincenz','Osler','[email protected]','Gu5QCXHQ','China'),(17,'Isidro','Hemphall','[email protected]','NQ4KEqzc','France'),(18,'Pinchas','Le Guin','[email protected]','ZsfzyYqo','China'),(19,'Rorie','Aleksandrev','[email protected]','dstH8RB5','South Africa'),(20,'Mayer','Pitkethly','[email protected]','OHjZtbmX5gt','Canada'),(21,'Karol','Baiden','[email protected]','EZ1iIWBYV1p6','Morocco'),(22,'Franciska','Peeters','[email protected]','QJX2b8DfGs','Russia'),(23,'Chlo','Kennford','[email protected]','NU8YjWQF','Portugal'),(24,'Wolfie','Lownds','[email protected]','1D00dQaOaO','Greece'),(25,'Sherri','Hellens','[email protected]','Ee7nls3','Poland'),(26,'Emory','Semark','[email protected]','VAIBfR8uO','Tajikistan'),(27,'Jakie','Hulks','[email protected]','jI5ylhi','China'),(28,'Leticia','Mathie','[email protected]','euFzcmE','Indonesia'),(29,'Raimondo','Milier','[email protected]','3fNmX69MpoiF','Poland'),(30,'Fawn','Cush','[email protected]','odFVlovDiSj9','China'),(31,'Lanita','Ropking','[email protected]','Me0ePL926NR','South Africa'),(32,'Addi','Dadson','[email protected]','GnqyVJ','Ivory Coast'),(33,'Rutter','Fiennes','[email protected]','UujqfWj0','Indonesia'),(34,'Cristina','Martinet','[email protected]','VYiAS2','China'),(35,'Shep','Rennenbach','[email protected]','UhRqfKs','Indonesia'),(36,'Nikolaos','Gladdish','[email protected]','d9U0oMHX','Philippines'),(37,'Sumner','Luker','[email protected]','x0lr2Xidf','Peru'),(38,'Hasheem','Bagguley','[email protected]','JBadgt1fFi4D','China'),(39,'Leonid','Neller','[email protected]','yTXyEiRGlGH','Zimbabwe'),(40,'Emogene','Antonin','[email protected]','1ocwURtMp','Ecuador'),(41,'Charisse','Snell','[email protected]','SoWALHqNw','Poland'),(42,'Arnaldo','Inchboard','[email protected]','YPHzFyOdm','Thailand'),(43,'Maren','Hatherley','[email protected]','kXIVTe1qXL4g','Philippines'),(44,'Faith','Mc Coughan','[email protected]','btiT7SM','Ukraine'),(45,'Frasco','Kevern','[email protected]','Jb2fWT3kkTgP','China'),(46,'Trumann','Ball','[email protected]','EjLb9Y','Norway'),(47,'Vanya','Lightwood','[email protected]','emywNQV','Russia'),(48,'Brendan','Dallmann','[email protected]','MfUwKhXYcjg','Canada'),(49,'Mord','Colam','[email protected]','m09cvGDyKf','China'),(50,'Sascha','Hogbin','[email protected]','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

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

Tanya Jawab tentang DevOps SRE CPE, gabung di https://t.me/devopsindonesia

Terbaru

  • Cara Mengganti Port Screen Sharing macOS
  • Cara Menonaktifkan Pager di macOS
  • Cara Mengupdate Nama Apple silicon-as-a-Service Scaleway
  • Cara Force Delete Namespace di Kubernetes
  • Install PHP MariaDB di Mac Monterey

Komentar

  • mazda on Tutorial Lengkap Install Mail Server Postfix Dovecot MariaDB di CentOS 7
  • adi on Menggunakan Mikrotik Sebagai SSH Client
  • aris u on Solusi Simple Queue Mikrotik Tidak Berjalan
  • Bowo on Cara Mematikan SSID Molecool Balifiber
  • aris on Solusi Simple Queue Mikrotik Tidak Berjalan

Tulisan Populer

  • Password Router Huawei HG8245H5 Indihome 1.2m views
  • Password Terbaru ZTE F609 Indihome 784.5k views
  • Password Superadmin Huawei HG8245A 318.3k views
  • Cara Setting Manual Modem GPON ZTE F609 Indihome 273.1k views
  • Cara Setting Wireless ZTE F609 Indihome 257.1k views
  • Mengaktifkan Port LAN di Huawei HG8245 Indihome 169.9k views
  • Akses UseeTV Indihome via Wireless ZTE F609 156.8k views
  • Kemana Menghilangnya Saldo BCA 50 ribu 153.2k views
  • Cara Reset Password ZTE F609 Indihome 147.6k views
  • Cara Setting DHCP Server Modem/Router ZTE F609 113.6k views

Kategori

  • Delphi
  • dll
  • Gambas
  • Internet
  • Java
  • Lazarus
  • Linux
  • PHP
  • Review
  • Teknologi

Sponsor

kadal.id
carakami.com
kuotabisa.com
Untuk jadi sponsor, hubungi kita lewat halaman sponsor
© 2021. Jaranguda
  • Linux
  • PHP
  • Internet
  • Teknologi
  • Delphi
  • Gambas
  • Java