How to implement search functionality in jqGrid in JAVA

Question

I am implementing jqgrid in java.

At the time of implementing search functionality I am not able to get search result, It reloads grid data with all records rather than filtered result. Please help me to resolve this issue and guide me to implement search functionality as well as advanced search function in java.

fraction of code that I have done:

        var lastselected, lastsel2;
        var curRowId = -1;
        var gridContainerId = "#data-grid-container";
        var la;
        var usernames;
        $(document).ready(
          function() {

           $(gridContainerId).jqGrid(
             {
              url : 'ManageUserServlet?methodName=fetchAllUsers',
              datatype : "json",
                    colNames: ['Email', 'Lastname', 'Firstname', 'Group', 'Active'],
                    /*colModel: [
                                { name: 'Email', width: 100, index: 'Email', searchoptions: { sopt: ['eq', 'ne']} },
                                { name: 'Lastname', index: 'LastName', searchoptions: { sopt: ['eq', 'ne', 'cn']} },
                                { name: 'Firstname', index: 'FirstName', searchoptions: { sopt: ['eq', 'ne', 'cn']} },
                                { name: 'Group', index: 'Group', searchoptions: { sopt: ['eq', 'ne', 'cn']} },
                                { name: 'Active', index: 'Active', searchoptions: { sopt: ['eq', 'ne', 'cn']} }
                              ],*/

              colNames : [ 'Email', 'Lastname', 'Firstname', 'Group',
                'Active'],
              colModel : [ {
               name : 'email',
               index : 'email',
               width : 85,
               sortable : true,
               sorttype : "text",
               editable : true,
               editoptions : {
                size : "20",
                maxlength : "30"
               },
               sopt : ['cn','bw','eq','ne','lt','gt','ew']
              }, {
               name : 'lastname',
               index : 'lastname',
               width : 75,
               editable : true,
               edittype : "text",
               editoptions : {
                size : "20",
                maxlength : "30"
               },
               sopt : ['cn','bw','eq','ne','lt','gt','ew']
              }, {
               name : 'firstname',
               index : 'firstname',
               width : 85,
               sortable : true,
               sorttype : "text",
               editable : true,
               edittype : "text",
               editoptions : {
                size : "20",
                maxlength : "30"
               },
               sopt : ['cn','bw','eq','ne','lt','gt','ew']
              }, {
               name : 'groupname',
               index : 'groupname',
               width : 80,
               sortable : true,
               sorttype : "text",
               editable : true,
               edittype : "text",
               editoptions : {
                size : "20",
                maxlength : "30"
               },
               sopt : ['cn','bw','eq','ne','lt','gt','ew']
              }, {
               name : 'isactive',
               index : 'isactive',
               width : 80,
               sortable : true,
               sorttype : "text",
               editable : true,
               edittype : "text",
               editoptions : {
                size : "20",
                maxlength : "30"
               }
              } ],
              rowNum : jQuery("#data-grid-container").jqGrid(
                'getRowData'),
               rowList : [10, 20, 30, 40],
               pager : '#data-grid-pager',
              sortname : 'username',
              viewrecords : true,
              sortorder : "desc",

              /*
               * ondblClickRow : function(id) { if (id && id !==
               * lastselected) {
               * $(gridContainerId).jqGrid('restoreRow',
               * lastselected); $(gridContainerId).jqGrid('editRow',
               * id, true); lastselected = id; } },
               */
              /*
               * onSelectRow : function(username) { if (username &&
               * username !== lastselected) {
               * $(gridContainerId).jqGrid('restoreRow',
               * lastselected); lastselected = null; } },
               */
              onSelectRow : function(id) {
               curRowId = id;
               var ids = jQuery("#data-grid-container").jqGrid(
                 'getGridParam', 'selarrrow');
               // alert("test: " + ids + "Length is::"+ids.length);
               /*
                * usernames = new Array(ids.length); var row;
                * for(var i=0; i<ids.length;i++) { usernames[i] =
                * jQuery("#data-grid-container").jqGrid('getCell',
                * ids[i], 'username'); } temp='Urvin';
                */
              },
              caption : "",
              height : 500
             });

            jQuery("#data-grid-container").jqGrid('setGroupHeaders', { 
            useColSpanStyle : false,
            groupHeaders : [ {
             startColumnName : 'email',
             numberOfColumns : 4,
             titleText : '<em>Users' +la+ '</em>' ,

            },
            {
             startColumnName : 'group',
             numberOfColumns : 1,
             titleText : '<em>Users' +la+ '</em>' ,

            }

            ]
           });
           $("#data-grid-container").jqGrid(
             'navGrid',
             '#data-grid-pager',
             {
              edit : true,
              add : true,
              del : true,
              search : true
             },
             {
              savekey : [ true, 13 ],
              reloadAfterSubmit : true,
              jqModal : false,
              closeOnEscape : true,
              closeAfterEdit : true,
              caption : "Edit User",
              url : 'ManageUserServlet?methodName=editUser',
              afterSubmit : function(response, postdata) {
               if (response.responseText == "Success") {
                jQuery("#success").show();
                jQuery("#success").html(
                  "User get Added Successfully.");
                jQuery("#success").fadeOut(6000);
                return [ true, response.responseText ];
               } else {
                return [ false, response.responseText ];
               }
              }
             },
             // Add options
             {
              closeOnEscape : true,
              caption : "Add User",
              url : 'ManageUserServlet?methodName=addUser',
              closeAfterAdd : true
             },
             // Delete options
             {
              caption : "Delete User",
              onclickSubmit : function(eparams) {
               var retarr = {};
               // we can use all the grid methods here
               // to obtain some data
               var ids = jQuery("#data-grid-container").jqGrid(
                 'getGridParam', 'selarrrow');
               // alert("test: " + ids + "Length is::"+ids.length);

               var row;
               for ( var i = 0; i < ids.length; i++) {
                if (i == 0) {
                 usernames = jQuery("#data-grid-container")
                   .jqGrid('getCell', ids[i],
                     'username');
                } else {
                 usernames += ","
                   + jQuery("#data-grid-container")
                     .jqGrid('getCell', ids[i],
                       'username');
                }
               }
               alert("Usernames :" + usernames);
               retarr = {
                lstUsername : usernames
               };
               return retarr;
              },
              url : 'ManageUserServlet?methodName=deleteUser'
             }, 
             {
              Find: "Search", 
              Reset: "Reset",
              closeOnEscape : true,
              closeAfterSearch : true,
              caption : "Search",
              multipleSearch : true,
              /*onClickFind : jQuery(gridContainerId).searchGrid( {sopt:['cn','bw','eq','ne','lt','gt','ew']})*/
              /*var sg = jQuery("#mysearch").filterGrid(...)[0]; 
              sg.triggerSearch();*/
              autoSearch : true
             });
           $(".ui-jqgrid-titlebar").hide();
          });

Guidance to implement search in jqgrid is highly appreciate.

UPDATED:

Here is the code for creating JSON object to fill grid data on servlet:

        private void fetchAllUsers() {
          List<UserVO> lstUsers = adminServices.fetchAllUsers();
          if(lstUsers != null && !lstUsers.isEmpty()) {
           try{
            JSONObject responseData=new JSONObject();
            responseData.put("total",2);
            responseData.put("page",1);    
            responseData.put("records",3);
            JSONArray cellArray=new JSONArray();
                  JSONArray cell = new  JSONArray();     
                  JSONObject cellObj=new JSONObject();
                  int i=1;
            for(UserVO userVO : lstUsers) {
             if(userVO!= null) {
              cellObj.put("id",i);

              cell.add(userVO.getEmail());
              cell.add(userVO.getLastName());
              cell.add(userVO.getFirstName());
              cell.add(userVO.getGroupVO().getGroupName());
              if(userVO.isActive()){
               cell.add("Active"); 
              }else{
               cell.add("In-Active");
              }
              cellObj.put("cell", cell);
              cell.clear();
              cellArray.add(cellObj);
              i++;
             }
            }
            responseData.put("rows", cellArray);
            //response.setContentType("applisation/json");
            out.print(responseData);
            out.flush();
           }catch(Exception e) {
            System.out.println("There is some error");
           }
          }

Answer 1

I think you are missing loadonce: true

If you want to use search option provided by the jqgrid then you must use loadonce: true