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..
[php]
<!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();
?>

[/php]

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 :
[php]
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);
}
[/php]

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 :
[php]
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();
}
[/php]
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

22 thoughts on “Mengaktifkan fitur search, sort dan paging pada JQrid dan Codeigniter”

Stefanus Diptya June 28, 2011 at 10:17 am
thx bro…, btw itu jQgrid versi brpa??
Reply ↓
1. dudu Post authorJune 28, 2011 at 10:26 am
  JQGrid 4.0
  Reply ↓
mht July 19, 2011 at 2:38 pm
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
Reply ↓
1. dudu Post authorJuly 19, 2011 at 8:16 pm
  download di situsnya jqgrid.. ada cara penggunaanya ko.. mau donwload source code juga bisa di github 🙂
  Reply ↓
Abd. Kholiq August 29, 2011 at 11:03 am
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.
Reply ↓
1. dudu Post authorAugust 30, 2011 at 9:00 pm
  mungkin path nya masih belum benar.
  Reply ↓
Aziz November 29, 2011 at 1:18 pm
terima kasih, tutorial ini sangat membantu…
Reply ↓
1. dudu Post authorNovember 29, 2011 at 2:29 pm
  senang bisa membantu
  Reply ↓
arief January 6, 2012 at 1:34 pm
gmana cara nambahi kondisi search “IS NULL” atau “IS NOT NULL ” di functions search ??
Reply ↓
Setoelkahfi April 11, 2012 at 11:48 am
Ijin tak nggo referensi nang blogku mas, link tercantum deh 😀
salam ngapak ya :shakehand
Reply ↓
ferry April 26, 2012 at 4:30 am
koq di kompi saya gak keluar ya jgridnya?apa saja yg perlu diatur ya?mohon bantuan
Reply ↓
1. dwijonarko April 30, 2012 at 5:28 pm
  cek path ke javascriptnya, cek pake firebug
  Reply ↓
ferry April 30, 2012 at 4:48 pm
bro mau tanya…..
bagian crud koq gak ada form validationnya ya??mungkin bisa diajari cara membuatnya?terima kasih….
Reply ↓
1. dwijonarko April 30, 2012 at 5:29 pm
  nunggu artikel berikutnya ya 🙂 tapi validator ga pake jqgrid
  Reply ↓
Manz May 14, 2012 at 2:32 pm
JQgrid bagus buat data yg banyak ga?? Ato kaya Flexigrid yg kadang ngehung kalo data nya banyak,,,
Reply ↓
1. dwijonarko May 15, 2012 at 7:31 am
  saya sudah mencoba untuk tabel dengan 5000 record, ga ada masalah (bahkan diakses online, bukan lokal). Kalo lebih banyak lagi belum tau. 🙂
  Reply ↓
Anna May 30, 2012 at 1:01 pm
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
Reply ↓
1. dwijonarko May 30, 2012 at 1:06 pm
  kalo datanya ga keluar, coba di cek pake firebug, nanti response nya menghasilkan apa
  Reply ↓
  1. Anna September 19, 2012 at 11:53 am
    gan mau nanya lagi nih,gmna ya nambahin form search tpi ga lwt jqgrid,,jdi jqgrid ny cuma buat nampilin datany aj..mohon bantuannya..
    Reply ↓
  2. Anna September 26, 2012 at 5:09 pm
    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..
    Reply ↓
    1. dwijonarko September 26, 2012 at 5:52 pm
      di querynya limit coba di utak atik
      Reply ↓