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

  • thx bro…, btw itu jQgrid versi brpa??

  • mht

    mas gimana cara panggil plug jqgridnya .itu yg versi berapa dan dimana bisa dapatin pluginnya ituu..maklum mas masi baru pertama kali mau beralajr..klo bisa di kirim ke email y masss

    • download di situsnya jqgrid.. ada cara penggunaanya ko.. mau donwload source code juga bisa di github 🙂

  • Abd. Kholiq

    ketika saya menggunakan ini :
    dan

    semua terliaht ok baik fungsi ataupun tampilan yahutnya, tetapi ketika saya coba offline saya ganti
    <script type="text/javascript" src="jscript/jquery-ui.min.js”>
    <script type="text/javascript" src="jscript/jquery.min.js”>
    berfungsi tetapi tampilannya tidak seperti sebelumnyam sebagai informasi saya telah membuat folder jscript di root dan telah mengkopikan 2 file tadi.

    • mungkin path nya masih belum benar.

  • Aziz

    terima kasih, tutorial ini sangat membantu…

    • senang bisa membantu

  • gmana cara nambahi kondisi search “IS NULL” atau “IS NOT NULL ” di functions search ??

  •  Ijin tak nggo referensi nang blogku mas, link tercantum deh 😀
    salam ngapak ya :shakehand

  • ferry

    koq di kompi saya gak keluar ya jgridnya?apa saja yg perlu diatur ya?mohon bantuan

    • dwijonarko

      cek path ke javascriptnya, cek pake firebug

  • ferry

    bro mau tanya…..
    bagian crud koq gak ada form validationnya ya??mungkin bisa diajari cara membuatnya?terima kasih….

    • dwijonarko

      nunggu artikel berikutnya ya 🙂 tapi validator ga pake jqgrid

  • Manz

    JQgrid bagus buat data yg banyak ga?? Ato kaya Flexigrid yg kadang ngehung kalo data nya banyak,,,

    • dwijonarko

      saya sudah mencoba untuk tabel dengan 5000 record, ga ada masalah (bahkan diakses online, bukan lokal). Kalo lebih banyak lagi belum tau. 🙂

  • Anna

    misi mas bro mau nanya nih,,kok data ane ga keluar ya,yg keluar cuma tabel jqgridnya aja..
    bisa tulung dbantu maklum masi newbie bgt..makasi sblmnya

    • dwijonarko

      kalo datanya ga keluar, coba di cek pake firebug, nanti response nya menghasilkan apa

      • Anna

        gan mau nanya lagi nih,gmna ya nambahin form search tpi ga lwt jqgrid,,jdi jqgrid ny cuma buat nampilin datany aj..mohon bantuannya..

      • Anna

        oia gan mu ngasi tau nih,,contoh yg didemo ny itu klu Lbh dr 1 page trus pas search dng keyword name ny makan pagi,koQ munculny ad 2page ya,,shrsny kn 1,n yg di page kedua ny itu kosong..knpa tuh ya..mohon pencerahan..

        • dwijonarko

          di querynya limit coba di utak atik