How to display the searched data on the jgrid

Question

this is related to my previous question about jqgrid. im doing now a search button that would search my inputed text from the server and display those data (if there is) in the jqgrid. Now, what i did is i create a global variable that stores the filters. Here's my javascript code for my searching and displaying:

    filter = ''; //this is my global variable for storing filters
    $('#btnsearchCode').click(function(){
       var row_data = '';
       var par = {
          "SessionID": $.cookie("ID"),
          "dataType": "data",
          "filters":[{
             "name":"code",
             "comparison":"starts_with",
             "value":$('#searchCode').val(),
          }],
          "recordLimit":50,
          "recordOffset":0,
          "rowDataAsObjects":false,
          "queryRowCount":true,
          "sort_descending_fields":"main_account_group_desc"
       }    
       filter="[{'name':'main_account_group_code','comparison':'starts_with','value':$('#searchCode').val()}]";
       $('#list1').setGridParam({
        url:'json.php?path=' + encodeURI('data/view') + '&json=' + encodeURI(JSON.stringify(par)), 
        datatype: Settings.ajaxDataType,  
       });
       $('#list1').trigger('reloadGrid');

       $.ajax({
           type: 'GET',
           url: 'json.php?' + $.param({path:'data/view',json:JSON.stringify(par)}),
           dataType: Settings.ajaxDataType,
           success: function(data) {
              if ('error' in data){
                 showMessage('ERROR: ' + data["error"]["msg"]);
              }
              else{                
                 if ( (JSON.stringify(data.result.main.row)) <= 0){
                     alert('code not found');
                 }
                 else{
                     var root=[];
                     $.each(data['result']['main']['rowdata'], function(rowIndex,  rowDataValue) {
                     var row = {};
                     $.each(rowDataValue, function(columnIndex, rowArrayValue) {
                        var fldName = data['result']['main']['metadata']['fields'][columnIndex].name;        
                        row[fldName] = rowArrayValue;                   
                     });
                     root[rowIndex] = row;
                     row_data += JSON.stringify(root[rowIndex]) + '\r\n';
                });         
             }
             alert(row_data);  //this alerts all the data that starts with the inputed text...
          }
      }
    });
  }

i observed that the code always enter this (i am planning this code to use with my other tables) so i put the filter here:

   $.extend(jQuery.jgrid.defaults, {
       datatype: 'json',
       serializeGridData: function(postData) {
          var jsonParams = {
            'SessionID': $.cookie("ID"),    
            'dataType': 'data',
            'filters': filter,
            'recordLimit': postData.rows,
            'recordOffset': postData.rows * (postData.page - 1),
            'rowDataAsObjects': false,
            'queryRowCount': true,
            'sort_fields': postData.sidx
          };

          return 'json=' + JSON.stringify(jsonParams);
      },
      loadError: function(xhr, msg, e) { 
        showMessage('HTTP error: ' + JSON.stringify(msg) + '.');
      },
    }); 

now, my question is, why is it that that it displayed an error message "Server Error: Parameter 'dataType' is not specified"? I already declared dataType in my code like above but it seems that its not reading it. Is there anybody here who can help me in this on how to show the searched data on the grid?(a function is a good help)

Answer 1

I modified your code based on the information from both of your questions. As the result the code will be about the following:

var myGrid = $("#list1");

myGrid.jqGrid({
    datatype: 'local',
    url: 'json.php',
    postData: {
        path: 'data/view'
    },
    jsonReader: {
        root: function(obj) {
            var root = [], fields;

            if  (obj.hasOwnProperty('error')) {
                alert(obj.error['class'] + ' error: ' + obj.error.msg);
            } else {
                fields = obj.result.main.metadata.fields;
                $.each(obj.result.main.rowdata, function(rowIndex, rowDataValue) {
                    var row = {};
                    $.each(rowDataValue, function(columnIndex, rowArrayValue) {
                        row[fields[columnIndex].name] = rowArrayValue;
                    });
                    root.push(row);
                });
            }

            return root;
        },
        page: "result.main.page",
        total: "result.main.pageCount",
        records: "result.main.rows",
        repeatitems: false,
        id: "0"
    },
    serializeGridData: function(postData) {
        var filter = JSON.stringify([
            {
                name:'main_account_group_code',
                comparison:'starts_with',
                value:$('#searchCode').val()
            }
        ]);

        var jsonParams = {
            SessionID: $.cookie("ID"),
            dataType: 'data',
            filters: filter,
            recordLimit: postData.rows,
            recordOffset: postData.rows * (postData.page - 1),
            rowDataAsObjects: false,
            queryRowCount: true,
            sort_descending_fields:'main_account_group_desc',
            sort_fields: postData.sidx
        };

        return $.extend({},postData,{json:JSON.stringify(jsonParams)});
    },
    loadError: function(xhr, msg, e) {
        alert('HTTP error: ' + JSON.stringify(msg) + '.');
    },
    colNames:['Code', 'Description','Type'],
    colModel:[
        {name:'code'},
        {name:'desc'},
        {name:'type'}
    ],
    rowNum:10,
    viewrecords: true,
    rowList:[10,50,100],
    pager: '#tblDataPager1',
    sortname: 'desc',
    sortorder: 'desc',
    loadonce:false,
    height: 250,
    caption: "Main Account"
});
$("#btnsearchCode").click(function() {
    myGrid.setGridParam({datatype:'json',page:1}).trigger("reloadGrid");
});

You can see the code live here.

The code uses datatype:'local' at the beginning (at the 4th line), so you will have no requests to the server if the "Search" button is clicked. The serializeGridData the data from the postData parameter of serializeGridData will be combined with the postData parameter of jqGrid (the parameter "&path="+encodeURIComponent('data/view') will be appended). Additionally all standard jqGrid parameters will continue to be sent, and the new json parameter with your custom information will additionally be sent.

By the way, if you want rename some standard parameters used in the URL like the usage of recordLimit instead of rows you can use prmNames parameter in the form.

prmNames: { rows: "recordLimit" }