Mengaktifkan fitur search, sort dan paging pada JQrid dan Codeigniter

Sebelumnya saya mohon maaf, jika pada artikel sebelumnya Tutorial menggunakan Codeigniter dan JqGrid ternyata masih banyak terdapat kesalahan pada codingnya :D. Misalnya fungsi sorting dan search belum bisa jalan, kemudia fungsi pagination juga masih eror :((.

Kali ini saya berusaha memperbaiki kesalahan tersebut, dengan mengaktifkan fitur search, sorting dan paging pada jqgrid tersebut.

Berbekal dari google, dan akhirnya menemukan blog ini.. Mulau saya kutak katik koding yang dahulu.. ternyata banyak salahnya saya 😀 gapapa deh, namanya juga belajar. Sebelumnya saya mengubah file view, menjadi seperti ini..

<!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="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
        <script type="text/javascript" src="<?php echo base_url(); ?>jqgrid/js/i18n/grid.locale-en.js"></script>
        <script type="text/javascript" src="<?php echo base_url(); ?>jqgrid/jquery.jqGrid.js"></script>
        <script type="text/javascript" src="<?php echo base_url(); ?>jqgrid/jquery.jqGrid.min.js"></script>
        <script type="text/javascript" src="<?php echo base_url(); ?>jqgrid/jquery.layout.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:['Date','Name','Amount'],       //Grid column headings
		   			colModel:[
				   		{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: 300,
				   	rowList:[10,20,30],
				   	pager: '#pager1',
				   	sortname: 'id',
				    viewrecords: true,
					rownumbers: true,
					gridview: 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>

Intinya perubahan view adalah membetulkan file javascript yang dipanggil (dulu ga tau, asal manggil aja). Kemudian pada controller, ada beberapa yang saya betulkan, terutama pada fungsi untuk memanggil jqgridnya (dulu saya memakai nama fungsinya function loadDataGrid). Yang saya lakukan adalah menambahkan beberapa parameter yang digunakan pada searching data, paging dan sorting. Untuk lebih jelasnya script function loadDataGrid sebagai berikut :

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

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

		$where = ""; //if there is no search request sent by jqgrid, $where should be empty
        $searchField = isset($_POST['searchField']) ? $_POST['searchField'] : false;
        $searchOper = isset($_POST['searchOper']) ? $_POST['searchOper']: false;
        $searchString = isset($_POST['searchString']) ? $_POST['searchString'] : false;

        if ($_POST['_search'] == 'true') {
            $ops = array(
            'eq'=>'=', //equal
            'ne'=>'<>',//not equal
            'lt'=>'<', //less than
            'le'=>'<=',//less than or equal
            'gt'=>'>', //greater than
            'ge'=>'>=',//greater than or equal
            'bw'=>'LIKE', //begins with
            'bn'=>'NOT LIKE', //doesn't begin with
            'in'=>'LIKE', //is in
            'ni'=>'NOT LIKE', //is not in
            'ew'=>'LIKE', //ends with
            'en'=>'NOT LIKE', //doesn't end with
            'cn'=>'LIKE', // contains
            'nc'=>'NOT LIKE'  //doesn't contain
            );

            foreach ($ops as $key=>$value){
                if ($searchOper==$key) {
                    $ops = $value;
                }
            }
            if($searchOper == 'eq' ) $searchString = $searchString;
            if($searchOper == 'bw' || $searchOper == 'bn') $searchString .= '%';
            if($searchOper == 'ew' || $searchOper == 'en' ) $searchString = '%'.$searchString;
            if($searchOper == 'cn' || $searchOper == 'nc' || $searchOper == 'in' || $searchOper == 'ni') $searchString = '%'.$searchString.'%';

            $where = "$searchField $ops '$searchString' "; //create where parameter for search data
        }

		if(!$sidx) $sidx =1;
        $count = $this->db->count_all_results('daily'); //get total rows from table daily

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

		if ($page > $total_pages) $page=$total_pages;
   		$query = $this->MDaily->getAllGrid($start,$limit,$sidx,$sord,$where); //add parameter to model

		$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($row->date,$row->name,$row->amount);
			$i++;
		}
		echo json_encode($responce);
  }

banyak perubahannya ya? hehehe.. maklum saya juga masih belajar.. Dan untuk model, saya membuat sebuah fungsi baru yaitu getAllGrid dengan parameternya ada banyak (lihat source codenya langsung) seperti berikut :

function getAllGrid($start,$limit,$sidx,$sord,$where){
    $this->db->select('id,date,name,amount');
    $this->db->limit($limit);
    if($where != NULL)$this->db->where($where,NULL,FALSE);
    $this->db->order_by($sidx,$sord);
    $query = $this->db->get('daily',$limit,$start);

    return $query->result();
  }

terdapat if dalam fungsi tersebut, digunakan kalau ada parameter where, maka dilakuakan query menggunakan where tersebut, jika tidak ya tidak menggunakan where :).

Semoga berhasil.. Ingat, untuk menjalankan program ini harus terhubung ke internet, soalnya jquery nya saya ambil langsung dari internet :D. Dan juga harus mengikuti artikel yang ini dulu..

Demo masih tetap pada halaman berikut

Untuk lebih jelasnya tentang perubahan yang saya gunakan, bisa di cek di github saya