Custom Search Form in JqGrid

Question

I'm trying my hands on JqGrid with PHP MVC structure. I do not want to use Search functionality of Jq Grid, rather I want General Keyword Search. I'm having data in json array. Please let me know how I can perform search with my json data set.

This search should be perform on multiple columns.

This is my search form

<form name="frmsearch" id="frmsearch">
     <input type="text" id="txtsearch" name="txtsearch"/>
     <a href="javascript:void(0);" onClick="doSearch();">Search</a>
</form>

and this is my Grid

$(document).ready(function () {
    jQuery("#agentlist").jqGrid({
        url: "manageagents/getagents/",
        datatype: "json",                
        mtype:"POST",
        jsonReader: {
            root: "rows",
            page: "currpage",
            total: "totalpages",
            records: "totalrecords",
            id: "0",
            cell:"",
            repeatitems: false
        },
        colNames: ['Id','Agent Name', 'Email Address', 'Phone No.1', 'Phone No.2','City', 'State', 'Country'],
        colModel: [ 
                ... ... ...
                  ],
        rowNum:<?php echo $this->config->item('per_page');?>, 
        rowList:<?php echo $this->config->item('nav_page');?>,
        pager: '#plist',
        autowidth: true,
        height: "100%",
        loadonce: true,
        viewrecords: true,
        altRows:true,                
        caption: "",
    }).navGrid('#plist', { edit: false, add: false, del: false, search: true, refresh: false }); ;
});

score 1 · Accepted Answer · edited May 23 '17 at 12:03

The most easy way to do what you want is to send the current value from the searching input field #txtsearch to the URL "manageagents/getagents/". It's enough to add postData parameter with the property like the name of the parameter (like myFilter) which will be sent to the server:

postData: {
    myFilter: function () { return $("#txtsearch").val(); }
}

You can read more details in the answer.

Inside of doSearch function you can just call

jQuery("#agentlist").trigger("reloadGrid", [{page: 1}]);

Custom Search Form in JqGrid

1 Answers1