Tutorial menggunakan Codeigniter dan JqGrid


Jqgrid adalah plugin dari Jquery yang digunakan untuk manipulasi data menggunakan framework jquery. Jqgrid memiliki fungsi antara lain load data, search, edit delete dan sebagainya. Apabila kita biasa menampilkan data dalam bentuk tabel biasa, maka dengan menggunakan Jqgrid, data akan ditampilkan menjadi lebih menarik dan dinamis. Beberapa fungsi dari Jqgrid dapat dilihat pada halaman demo nya.

Tutorial kali ini saya akan menggabungkan Jqgrid dengan framework codeigniter (tentunya). Langkah-langkahnya adalah dengan meload data dari database dalam format JSON (dapat juga menggunakan format Array dan XML) kemudian ditampilkan dalam Jqgrid. Silahkan lihat demo nya di halaman ini.

Kita menggunakan aplikasi ci_ku yang sebelumnya kita bahas. Kemudian tambahkan dua fungsi berikut pada controller daily:

function jqGrid(){
  	$this->load->view('daily/grid');
  }

  function loadDataGrid(){
		$page = isset($_POST['page'])?$_POST['page']:1; // get the requested page
		$limit = isset($_POST['rows'])?$_POST['rows']:10; // get how many rows we want to have into the grid
		$sidx = isset($_POST['sidx'])?$_POST['sidx']:'name'; // get index row - i.e. user click to sort
		$sord = isset($_POST['sord'])?$_POST['sord']:''; // get the direction

		if(!$sidx) $sidx =1;
		$query = $this->MDaily->getAll();

		$count = count($query);

		if( $count > 0 ) {
			$total_pages = ceil($count/$limit);    //calculating total number of pages
		} else {
			$total_pages = 0;
		}

		if ($page > $total_pages) $page=$total_pages;

		$start = $limit*$page - $limit; // do not put $limit*($page - 1)
		$start = ($start<0)?0:$start;  // make sure that $start is not a negative value

		$responce->page = $page;
		$responce->total = $total_pages;
		$responce->records = $count;
		$i=0;
		foreach($query as $row) {
			$responce->rows[$i]['id']=$row->id;
			$responce->rows[$i]['cell']=array($i+1,$row->date,$row->name,$row->amount);
			$i++;
		}
		echo json_encode($responce);
  }

fungsi jqGrid adalah fungsi yang nantinya kita panggil, sehingga URL nya akan menjadi (http://localhost/ci_ku/index.php/daily/jqGrid)

Kemudian fungsi loadDataGrid adalah fungsi yang dipanggil untuk meload data dari database dan ditampilkan dalam dormat JSON

untuk Model, tidak ada perubahan, karena kita hanya mengambil data sehingga bisa langsung di ambil dengan $this->MDaily->getAll();
kemudian untuk view saya buat seperti berikut :

<!DOCTYPE HTML>
<html lang="en-US">
 	<head>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
		<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
		<link type="text/css" href="<?php echo base_url()?>jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
		<link type="text/css" href="<?php echo base_url()?>jqgrid/css/jquery.searchFilter.css" rel="stylesheet" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="<?php echo base_url(); ?>jqgrid/jquery.jqGrid.js"></script>

		<title>Demo Jquery JqGrid Codeigniter</title>
	</head>
	<body>
		<?
			$ci =& get_instance();
			$base_url = base_url();
		?>

		<script type="text/javascript">
			jQuery().ready(function (){
				jQuery("#list1").jqGrid({
		   			url:'<?=$base_url.'index.php/daily/loadDataGrid'?>',      //another controller function for generating data
					mtype : "post",             //Ajax request type. It also could be GET
					datatype: "json",            //supported formats XML, JSON or Arrray
		   			colNames:['No','Date','Name','Amount'],       //Grid column headings
		   			colModel:[
				   		{name:'no',index:'no', width:5, align:"right"},
				   		{name:'date',index:'date', width:30, align:"left"},
				   		{name:'name',index:'name', width:20, align:"left"},
				   		{name:'amount',index:'amount', width:20, align:"right"},
		  			],
				   	rowNum:10,
				   	width: 450,
					height: 100,
				   	rowList:[10,20,30],
				   	pager: '#pager1',
				   	sortname: 'id',
					viewrecords: true,
					caption:"List Daily"
				}).navGrid('#pager1',{edit:false,add:false,del:false});
			});
		</script>

		<table id="list1"></table> <!--Grid table-->
		<div id="pager1"></div>  <!--pagination div-->
	</body>
</html>

Perlu diperhatikan juga direktori kita untuk meload jqgrid. Jqgrid dapat didownload pada halaman ini. Kemudian ekstrak pada root direktori project CI. Sesuaikan pada file jquery.jqGrid.js pada baris berikut, sesuai path tempat direktori Anda

var pathtojsfiles = "http://localhost/ci_ku/jqgrid/js/"; // need to be ajusted

Untuk demo bisa di lihat pada halaman ini dan source code ada pada github saya 🙂

Semoga berhasil 🙂

Update, untuk sorting data, silahkan controllernya yang

$query = $this->MDaily->getAll();

diganti

$query = $this->MDaily->getAll($limit,$sidx,$sord);

Kemudian bagian model diubah menjadi

function getAll($limit,$sidx,$sord){
    $this->db->select('id,date,name,amount');
    $this->db->from('daily');
    $this->db->limit($limit);
    $this->db->order_by($sidx,$sord);
    $query = $this->db->get();
    
    return $query->result();
  }

Update lagi, bagi yang akan mengaktifkan fitur search, ada pada artikel Berikut

  • aa_pratomo

    gan.. mau tanya lagi nehh.. klo mau nerapin CRUD CI di JqGrid gimana ya ?

  • aa_pratomo

    thank’s infonya gan 😀

  • kadung

    sayang sql dump nya tdk disertakan.
    trim’s ya tuts nya bagus

    • kadung

      maaf saya krg teliti.silahkan dihps comment nya.
      skli lg trim’s

      • gapapa.. eh dimana ya sql dump nya? kayanya emang belum saya buat 😀 maklum lupa,, tapi dilihat dari struktur tabel aja, kan gampang udah kelihatan 🙂

        Senang bisa membantu,,,

  • Mas, punya saya sudah jalan JQGrid nya
    Tapi gini, pas paging nya di klik, datanya ngga berubah. Tetap yg ada di halaman Awal.

    Kira – kira kenapa ya?

    • mungkin di modelnya pas ngambil data?

  • harry

    mas… alamat localhost di file var pathtojsfiles = “http://localhost/ci_ku/jqgrid/js/”; digan ti sama base_url gmn carangya mas???soalnya klo diakses dari komputer lain gak nampil gridnya…
    thanks mas…

    • karena itu file javascript, jadi ga bisa di ganti ke base_url. Alternatif lain ya di ganti ke direktori saja var pathtojsfiles = “./jqgrid/js/”; mungkin seperti itu atau bisa di sesuaikan lagi.

  • aa_pratomo

    gan mau tanya nih klo mau ngasih format penomeran gimana yah? misalnya didatabase terdapat value 6000 nanti dijqgrid nampak 6.000,00 gimana ya gan?

  • aa_pratomo

    makasihhh gans.. berhasil nehhh 😀

    • sama-sama 🙂

  • arlingga

    mas bagus sekali tutorialnya, saya sengan baca blog ini, mas saya lagi belajar2 ci nih, masih pemula, oh ya klo boleh saya tanya, bagaimana mengkombine script diatas, untuk admin saja,… mksud saya klo user biasa tidak bisa create update ato delete… bingung juga jelasinnya, yg pasti klo di wordpres, ada administrator user, trs ada moderator, ada user biasa,… jadi kaya CMS gitu mas, gmna ya… trimakash…

    • lho itu malah ga bisa create sama delete mas, suma show content aja 😀 bisa aja sih ditambahin sendiri kalo mau.

      Kalo cuma admin gitu ya pake authentication library aja mas, buat CI banyak pilihannya, buat sendiri juga boleh 🙂

  • RiQ

    saya punya masalah tiap untuk web browser Internet Explorer 8..
    tiap kali saya refresh kadang keluar warning yang bertuliskan jgrid is null or not object..
    bila keluar warning itu jqgrid tidak berjalan sama sekali..
    kira-kira kenapa ya?

    • maaf mas, saya belum pernah coba di IE (karena saya ga punya IE 🙂 )

  • kaka

    mas sy sdh coba tp ko tdk jalan ya. tabel nya muncul tp datanya tdk ada. pesan eror yg muncul di erorr console

    Error: jQuery().navGrid is not a function
    Source File: http://localhost/intranet/

    • Apakah jqgrid yang Anda download sudah lengkap? Mungkin ada file jqgrid yang belum di sertakan misalnya grid.formedit.js dan grid.common.js atau yang lain

  • kaka

    datanya sdh bs tampilkan mas rupanya salah pada path url nya hehe..slanjutnya klo mau menambahkan addrow,deleterow di navigatornya bgaimana caranya ya mas

  • Mas mau nanya nih…
    klo pke jqgrid tanpa menggunakan CI gmnana..???
    masih baru blajar saya mas…

    • sama aja ko, tinggal disesuaikan querynya

  • mas , ma’af nanya …..
    Itu JQuerynya kok dimasukin dalam View nya ya ?

    Ada ga cara buat misahin dalam folder sendiri + cara manggilnya gt …. baru belajar HMVC.

    Makasih

    • iya, karena ini contoh dalam kasus sederhana. Kalo mau buat templating juga bisa 🙂

  • Mang Odenk

    pernah ngalamin gak klo data lebih dari 2 halaman koq halaman ke3 dst dianggap halaman 2 ya??

    • kebtulan belum pernah, masih coba-coba juga

  • ajiipppp! *nyoba dulu * 😀

  • teguh

    mas.
    saya coba demonya.
    qo fungsi search ga jalan ya?

    • memang fungsi searchnya tidak saya aktifkan

      • teguh

        bisa kasih contohnya ga mas gimana cara mengaktifkannya?
        maaf mas saya masih newbie.

        • mengaktifkan apa ya? bisa diikuti tutorialnya langsung, dan lihat demo nya 🙂

  • ferdinant

    di jelasin dunk.,, alurnya…, newbie nih.,,

    • ci atau jquerynya? mungkin bisa belajar yang lebih mudah dulu 🙂 biar ga bingung

  • rama

    kok tabelnya ga bisa sorting? cara biar bisa sorting gimana ya? hal sederhana sih tp penting juga tuh. Ditunggu ya infonya

    • ah iya, saya lupa memasukkan untuk sortingnya :), ubah bagian controller untuk memanggil query model seperti ini :

      //sebelumnya $query = $this->MDaily->getAll();
      $query = $this->MDaily->getAll($limit,$sidx,$sord);
      

      kemudian di bagian modelnya function getAll menjadi sbb

      function getAll($limit,$sidx,$sord){ //menambahkan parameter
          $this->db->select('id,date,name,amount');
          $this->db->from('daily');
          $this->db->limit($limit);//limitnya
          $this->db->order_by($sidx,$sord); //ini untuk sortingnya yang kemaren kelupaan 🙂
          $query = $this->db->get();
          
          return $query->result();
        }
      
      • rama

        cepet banget responnya om, mantab dan makasih ya tutorialnya 😀

  • cecep

    Mas saya coba download aplikasi contohnya ada error di baris:
    jQuery(“#list1″).jqGrid is not a function
    [Break On This Error] caption:”List Daily”

    caption “List Daily” itu ada di databasenya atau seting jqgrid

    Mohon pencerahan

    • karena ada file jqgrid yang belum di load

  • mantaff !!
    sekarang udah bisa search.. pantesan kok udah nyertain locale js tp kok ttep ga bisa search.. ternyata ada tambahan post where 😀

  • luki

    mantaap banget mas tutornya, klo boleh minta pencerahan donk klo di tambah subgrid

  • Arif

    bagaimana caranya jika ingin menghidupkan fungsi add, edit dan del.
    di :
    }).navGrid(‘#pager1’,{edit:false,add:false,del:false});
    statusnya sdh sy buat true semua, pd saat sy klik form-nya muncul tp tdk ada kolom u2 mengisi, yg ada hanya tombol submit dan cancel.

    bisa bantu.?

  • toto

    Bos kok jqgridnya g ada keluar apa2 y???

    • dwijonarko

      kodenya salah?

  • dwijonarko

    query nya? data tabelnya sudah ada?

    Banyak hal yang bisa anda trace kesalahan itu ada dimana, karena penyebab tiap orang pasti beda,apalagi saya ga tau koding Anda seperti apa 🙂

    so, berusahalah

  • kunbero

    gan.. pake jqgrid agar semua modul bisa digunakan jasascript yg harus di inisialisasi yang mana sja???