Welcome Guest, Not a member yet? Register   Sign In
Implementing Search option in jqgrid by CI
#1

[eluser]Mizanur Islam Laskar[/eluser]
Hello everybody, how are you? I'm passing really some bad days with one of my development. I got an issue while implementing search feature in one of CI project. What I've done, only works for CRUD, but failed to understand how to implement General and Advance Search options to complete my application. I found a working demo in vicman's post, but the complete source is not there. Let me share my works so far as below:

My partial view (js part):
Code:
var lastsel2;    //save row ID of the last row selected
        var searchColumn1;
        
        jQuery().ready(function (){
        jQuery("#list1").jqGrid({
            url:'city_grid/list_all',    //Backend controller function generating grid XML
            editurl: 'city_grid/edit_test_save',    //Backend controller function save inline updates
            mtype : "post",        //Ajax request type. It also could be GET
            datatype: "xml",    //supported formats XML, JSON or Arrray
            colNames:['ID','Name','Country Code','District','Population','Action'],    //Grid column headings
            colModel:[
                {name:'id',index:'id', width:35, align:"left", hidden: true},
                {name:'name',index:'name', width:35, align:"left", editable:true, editoptions:{size:'35',maxlength:'255'}},
                {name:'country_code',index:'country_code', width:15, align:"left", editable:true, editoptions:{size:'5',maxlength:'5'}},
                {name:'district',index:'district', width:30, align:"left", editable:true, editoptions:{size:'15',maxlength:'15'}},
                {name:'population',index:'population', width:15, align:"left", editable:true, editoptions:{size:'8',maxlength:'8'}},
                {name:'act',index:'act', width:15, align:"center", editable:false, search:false},
            ],
            rowNum:12,
            autowidth: true,
            autoheight: true,
            height: 275,
            rowList:[10,20,30],
            pager: '#pager1',
            toolbar: [true,"top"],
            sortname: 'id',
            viewrecords: true,
            gridComplete: function(){
                var ids = jQuery("#list1").getDataIDs();
                for(var i=0;i < ids.length;i++){
                    var cl = ids[i];
                    se = "&lt;input type='button' value='Save'&gt;";        //checksave_in_city is a callback function to show the response of inline save controller function
                    ce = "&lt;input type='button' value='Cancel' title='Cancel'&gt;";
                    jQuery("#list1").setRowData(ids[i],{act:se+ce});    //Save and Cancel buttons inserted via jqGrid setRowData function
                }
                
                searchColumn1 = jQuery("#list1").jqGrid('getCol','name',true) //needed for live filtering search
            },
            onSelectRow: function(id){
                if(id && id!==lastsel2){
                    jQuery('#list1').restoreRow(lastsel2);    //restore last grid row
                    jQuery('#list1').editRow(id,true);        //show form elements for the row selected to enable updates
                    lastsel2=id;    //save current row ID so that when focus is gone it can be restored
                }
            },
            //caption:"&nbsp;&nbsp;&nbsp;Inline Edit Example"
            caption:"&nbsp;&nbsp;&nbsp;LIST OF CITIES<br />Search City: &lt;input type='text' placeholder='Search' results='0' id='gridsearch1' /&gt;"
        }).navGrid('#pager1',{edit:false,add:true,del:true,search:false},
                        {}, //  default settings for edit
                        {closeAfterAdd : true}, //  default settings for add
                        {},  // delete instead that del:false we need this
                        {}, // search options
                        {} /* view parameters*/
                    );
        
        //for live filtering search
        jQuery('#gridsearch1').keyup(function () {
            var searchString1 = jQuery(this).val().toLowerCase();
            jQuery.each(searchColumn1,function()
                {
                    if(this.value.toLowerCase().indexOf(searchString1) == -1)
                        jQuery('#'+this.id).hide();
                    else
                        jQuery('#'+this.id).show();
                });
        })
        
        });

function checksave_in_city(result)
    {
        if(result.responseText!='') alert(result.responseText);
        else $("#list1").trigger("reloadGrid");
    }
#2

[eluser]Mizanur Islam Laskar[/eluser]
My Partial Controller
Code:
function list_all ()
        {
            $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']:'id'; // get index row - i.e. user click to sort
            $sord  = isset($_POST['sord'])?$_POST['sord']:''; // get the direction
        
            if(!$sidx) $sidx =1;
            
            $count = $this->city_model->num_of_cities('');
        
            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
        
            $result = $this->city_model->sort_cities($sidx,$sord,$start,$limit,'');
            
        
            if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
                header("Content-type: application/xhtml+xml;charset=utf-8");
            } else {
                header("Content-type: text/xml;charset=utf-8");
            }
            $et = ">";
        
            echo "&lt;?xml version='1.0' encoding='utf-8'?$et\n";
            echo "<rows>";
            echo "<page>".$page."</page>";
            echo "<total>".$total_pages."</total>";
            echo "<records>".$count."</records>";
            // be sure to put text data in CDATA
            foreach($result as $row) {
                echo "<row id='".$row->id."'>";
                echo "<cell>&lt;![CDATA[".$row->id."]]></cell>";
                echo "<cell>&lt;![CDATA[".$row->name."]]></cell>";
                echo "<cell>&lt;![CDATA[".$row->country_code."]]></cell>";
                echo "<cell>&lt;![CDATA[".$row->district."]]></cell>";
                echo "<cell>&lt;![CDATA[".$row->population."]]></cell>";
                echo "<cell></cell>";
                echo "</row>";
            }
            echo "</rows>";
    
        }        
        
        function edit_test_save()
            {
                switch($_POST['oper'])
                    {
                        case('add'):
                            $insert_date['id']           = '';
                            $insert_date['name']         = $_POST['name'];
                            $insert_date['country_code'] = $_POST['country_code'];
                            $insert_date['district']     = $_POST['district'];
                            $insert_date['population']   = $_POST['population'];
                                                
                            $r = $this->common_model->add_data('city',$insert_date);
                            echo $r;
                            
                        break;
                        
                        case('edit'):
                        
                            $updated_data = array(
                                            'name'          => $_POST['name'],
                                            'country_code'  => $_POST['country_code'],
                                            'district'      => $_POST['district'],
                                            'population'    => $_POST['population']
                                          );
                            $r = $this->common_model->update_data('id', $_POST['id'], 'city', $updated_data);                      
                            echo $r;
                        
                        break;
                        
                        case('del'):
                        
                            $r = $this->common_model->delete_data('id', $_POST['id'], 'city');                      
                            echo $r;
                        
                        break;    
                            
                    }// end switch
            }

My Partial Model
Code:
function num_of_cities($wh)
        {
            if( !empty($wh) )
                {
                    $query = $this->db->query("SELECT * FROM city ".$wh);  
                }
            else
                {
                    $this->db->select('*');
                    $this->db->from('city');
                    $query = $this->db->get();
                }
            return $query->num_rows();
        }
    
    function sort_cities($sidx,$sord,$start,$limit,$wh)
        {
            if( !empty($wh) )
                {
                    $query = $this->db->query("SELECT * FROM city ".$wh." ORDER BY ".$sidx." ".$sord." LIMIT ".$start.", ".$limit."");  
                }
            else
                {
                    $this->db->select('*');
                    $this->db->from('city');
                    $this->db->order_by($sidx, $sord);
                    $this->db->limit($limit, $start);
                    $query = $this->db->get();
                }
            
            return $query->result();    
        }

Any idea please? Thanks is advance.




Theme © iAndrew 2016 - Forum software by © MyBB