Tutorial menggunakan Codeigniter dan JqGrid

Manufacturers

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>

<head>

<title>Demo Jquery JqGrid Codeigniter</title>

</head>

<body>

$ci =& get_instance();

$base_url = base_url();

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>

</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);