Integrate jqgrid with codeigniter

Today we learn how to integrate jqgrid with codeigniter.

At first, write a model in your application/model directory. The code is ….

class JqgridSample extends CI_Model {
function getAllData($start,$limit,$sidx,$sord,$where){
    $this->db->select('id,name,email,passport,phone,fax,address');
    $this->db->limit($limit);
    if($where != NULL)
        $this->db->where($where,NULL,FALSE);
    $this->db->order_by($sidx,$sord);
    $query = $this->db->get('info',$limit,$start);

    return $query->result();
}

}

Then, write a controller in your application/controller directory. The code is

class Demo extends CI_Controller {
function __construct() {
    parent::__construct();
    $this->load->model('JqgridSample');
}

function jqGrid(){
$this->load->view('showGrid');
}

function loadData(){
    $page = isset($_POST['page'])?$_POST['page']:1; 
    $limit = isset($_POST['rows'])?$_POST['rows']:10; 
    $sidx = isset($_POST['sidx'])?$_POST['sidx']:'name'; 
    $sord = isset($_POST['sord'])?$_POST['sord']:'';         
    $start = $limit*$page - $limit; 
    $start = ($start<0)?0:$start; 

    $where = ""; 
    $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'=>'=', 
        'ne'=>'<>',
        'lt'=>'<', 
        'le'=>'<=',
        'gt'=>'>', 
        'ge'=>'>=',
        'bw'=>'LIKE',
        'bn'=>'NOT LIKE',
        'in'=>'LIKE', 
        'ni'=>'NOT LIKE', 
        'ew'=>'LIKE', 
        'en'=>'NOT LIKE', 
        'cn'=>'LIKE', 
        'nc'=>'NOT LIKE' 
        );
        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' "; 

    }

    if(!$sidx) 
        $sidx =1;
    $count = $this->db->count_all_results('info'); 
    if( $count > 0 ) {
        $total_pages = ceil($count/$limit);    
    } else {
        $total_pages = 0;
    }

    if ($page > $total_pages) 
        $page=$total_pages;
    $query = $this->JqgridSample->getAllData($start,$limit,$sidx,$sord,$where); 
    $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->name,$row->email,$row->passport,$row->phone,$row->fax,$row->address);
        $i++;
    }

    echo json_encode($responce);
}

}

And finally you write a view in your application/views directory..

<head>

    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>application/views/css/custom-theme/jquery-ui-1.8.16.custom.css" />

    <link type="text/css" href="<?php echo base_url()?>application/views/css/ui.jqgrid.css" rel="stylesheet" />

    <link type="text/css" href="<?php echo base_url()?>application/views/css/plugins/searchFilter.css" rel="stylesheet" />

    <style>
        html, body {
            margin: 0;
            padding: 0;
            font-size: 75%;
        }
    </style>

    <script type="text/javascript" src="<?php echo base_url(); ?>application/views/js/jquery-1.5.2.min.js"></script>

    <script type="text/javascript" src="<?php echo base_url(); ?>application/views/js/i18n/grid.locale-en.js"></script>

    <script type="text/javascript" src="<?php echo base_url(); ?>application/views/js/jquery.jqGrid.min.js"></script>

    <title>Codeigniter With JQGrid</title>
</head>
<body>
    <center>
        <h1>Codeigniter With JQGrid</h1>
    <?php
        $ci =& get_instance();
        $base_url = base_url();
    ?>
    <table id="list"></table><!--Grid table-->
    <div id="pager"></div>  <!--pagination div-->
    </center>
</body>

<script type="text/javascript">
        $(document).ready(function (){
            jQuery("#list").jqGrid({
                url:'<?=$base_url.'index.php/demo/loadData'?>',      //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:['Name','Email','Passport','Phone','Fax','Address'],       //Grid column headings
                colModel:[
                    {name:'name',index:'name', width:100, align:"left"},
                    {name:'email',index:'email', width:150, align:"left"},
                    {name:'passport',index:'passport', width:100, align:"right"},
                    {name:'phone',index:'phone', width:100, align:"right"},
                    {name:'fax',index:'fax', width:100, align:"right"},
                    {name:'address',index:'address', width:100, align:"right"},
                ],
                rowNum:10,
                width: 750,
                //height: 300,
                rowList:[10,20,30],
                pager: '#pager',
                sortname: 'id',
                viewrecords: true,
                rownumbers: true,
                gridview: true,
                caption:"List Of Person"
            }).navGrid('#pager',{edit:false,add:false,del:false});
        });
    </script>

For the view file for myself i create two folder in views directory js and css. and in js foder i place the jquery-1.5.2.min.js, grid.locale-en.js(views/js/i18n/), jquery.jqGrid.min.js which you find in jqgrid package.

In a same way jquery-ui-1.8.16.custom.css, ui.jqgrid.css needed that also is available in jqgrid package.

for running full process you have to create a database named jqgrid_sample and in the database create a table named info contains fields…

name

passport

phone

fax

address

thats it. enjoy. good bye.