Jqgrid toolbar search not working in scroll pagination

Question

I am working on jqgrid and my toolbar search is working before I use scroll pagination but now it is not working after scroll pagination.I use the parameter loadonce:true; after lot of google search but the total records are not loading.my Code is as follow

$(document).ready(function(){
var ageCheckbox = document.getElementById('sent_all_message');
ageCheckbox.onchange = function() { 
    var grid = $("#grid");
    if(this.checked){                          
        grid.jqGrid('resetSelection');
        var ids = grid.getDataIDs();
        for (var i=0, il=ids.length; i < il; i++) {
            grid.jqGrid('setSelection',ids[i], true);
        }
         $('.cbox').attr('disabled', true);
        $('#gview_grid #cb_grid').attr('checked',true).attr('disabled',true);
    }else{            
         grid.jqGrid('resetSelection');
         $('#gview_grid #cb_grid').attr('checked',false).attr('disabled',false);
         $('.cbox').attr('disabled', false);   
    }
};
$.extend(jQuery.jgrid.defaults, {
            prmNames: {
                id: "rowid", page: "page", rows: "rows",
                oper: "oper", sort: "sidx", order: "sord",
                search : "search"
            }
        });
jQuery("#grid").jqGrid({ //set your grid id        
  //  data: mydata, //insert data from the data object we created above 
    url:'adminCreateMessageGrid',
    datatype: "json",        

    colNames:['Id','First name','Last Name','Specialty','Username','Email'], //define column names
    colModel:[
        {name:'id',index:'id',hidden:true,width:50,align:"center"},
        {name:'first_name', index:'first_name',sortable:true, width:100,align:"center"},
        {name:'last_name', index:'last_name',sortable:true, width:100,align:"center"},
        {name:'description', index:'description',sortable:true, width:100,align:"center",stype:"select",
        searchoptions: {
        sopt:['eq'],        
        value: ":All;1:Family Practice;2:Obstetrics",          
       // defaultValue: "1"         
        }},                 
        {name:'user_name', index:'user_name',sortable:true,width:100,align:"center"},
        {name:'email', index:'email',sortable:true,width:170,align:"center"}
    ], //define column models        
    pager: '#pager', //set your pager div id
    rowNum: 50,
    sortname: 'first_name', //the column according to which data is to be sorted; optional
    scroll:1,
    multiSort:true,
    sortable:true,
  //  loadonce : true,      
    ignoreCase: true,
    scrollOffset: 1,
    gridview: true,     
    height: 450,
    width: 875,  
    sortorder: 'asc',         
    viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z” optional
    multiselect: true,
    shrinkToFit:true,        
    onSelectRow: function (id) {
        var  arrID = new Array();
        $('.cbox').each(function(){
            if($(this).attr('checked') == 'checked'){                    
                var name = $(this).attr('id');
                var id = $('#'+name).closest('tr.jqgrow').attr('id');   
                arrID.push(id);                    
            }
        });
         $('#selectedUser').val(arrID);
       // console.log(arrID.toSource());
    },
    caption:"Select Users", //title of grid
   loadComplete: function () {
    var objRows = $("#list_accounts tr"); 
var objHeader = $("#list_accounts .jqgfirstrow td"); 

if (objRows.length > 1) { 
    var objFirstRowColumns = $(objRows[1]).children("td"); 
    for (i = 0; i < objFirstRowColumns.length; i++) { 
        $(objFirstRowColumns[i]).css("width", $(objHeader[i]).css("width")); 
    } 
} 
     $('#lui_grid').remove();
   }
});

//jQuery("#grid").setGridParam({rowNum:50}).trigger("reloadGrid"); jQuery("#grid").jqGrid("filterToolbar", { multipleSearch:true, recreateFilter:true, searchOperators: true,
stringResult: true, overlay:false, searchOnEnter: false, defaultSearch: "bw",

});
});

my pagination code is as below

 $Page = $_GET['page'];
    $OrderByOption = $_GET['sidx'];
    $OrderByOptionSort = $_GET['sord'];
    if (isset($OrderByOption) && $OrderByOption != '') {
        if (isset($OrderByOptionSort) && $OrderByOptionSort != '') {
            $OrderBy = 'ORDER BY users.first_name' . $OrderByOption . ' ' . $OrderByOptionSort;
        }
    }
    $Limit = 50;      
    $arrAllUserData = $this->User_model->messagegrcountid();
    $PageCount = 0;
    if (count($arrAllUserData) > 0) {
        if ($Limit != 0) {
            $PageCount = ceil(count($arrAllUserData) / $Limit);
        } else {
            $PageCount = count($arrAllUserData);
        }
    }       
    if ($Page > $PageCount)
        $Page = $PageCount;        
    if ($Page < 1)
        $Page = 1; 
    $Start = ($Limit * $Page) - $Limit;  
    $arrUserData = $this->User_model->messagegrid($Start,$Limit,$OrderBy);
    $ResponceData = new stdClass(); 
    $ResponceData->total = $PageCount;
    $ResponceData->page = $Page;       
    $ResponceData->records = count($arrAllUserData);
    for ($Index = 0; $Index < count($arrUserData); $Index++) {
            $ResponceData->rows[$Index]['cell'] = array($arrUserData[$Index]['id'],$arrUserData[$Index]['first_name'],$arrUserData[$Index]['last_name'],$arrUserData[$Index]['description'],$arrUserData[$Index]['user_name'],$arrUserData[$Index]['email']);
        }
    echo json_encode($ResponceData);  

please suggest me the answer

Answer 1

If loadonce is set to true, the grid loads the data from the server only once (using the appropriate datatype). After the first request, the datatype parameter is automatically changed to local and all further manipulations are done on the client side. The functions of the pager (if present) are disabled.

And in your case, virtual scrolling will only work if loadonce is set to true. You have to modify your server side call to return the whole records at once. Or else write your own logic to do the scrollbar pagination (Which I assume would be slightly complicated).

Refer jqgrid documentation for more information