Tutorial menggunakan Codeigniter dan JqGrid

51 Replies


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