title: JqGrid loading every time on Next click on paging
body: <p>I bind data in JqGrid on button click and it completed successfully. But when i click on next of pagging, data bind function call again and show same page i.e 1. Not moving to 2nd page. Please help me on this.</p>
  
  <p><a href="https://i.stack.imgur.com/8peX2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8peX2.png" alt="Data Table"></a></p>
  
  <pre><code> function SearchEmployee() {
      alert('Button Clicked'); 
      $('#grid').jqGrid({
          datatype: function (postdata) {
              var empId = $("#EmployeeId").val();
              var firstName = $("#F_Name").val();
              var lastName = $("#L_Name").val();
  
              var EmployeeDetailsModel = {
                  EmployeeId: empId,
                  F_Name: firstName,
                  L_Name: lastName
              };
              $.ajax({
                  url: "/Common/EmployeeSearchData/",
                  type: 'POST',
                  dataType: "json",
                  contentType: "application/json; charset=utf-8",
                  data: JSON.stringify({ objEmpModel: EmployeeDetailsModel }),
                  error: function (data, textStatus) {
                      alert('Error loading json');
                  },
                  success: function (jsondata, st) {
                      if (st == 'success') {
                          //alert('success');
                          alert(JSON.stringify(jsondata));
                          var thegrid = jQuery("#grid")[0];
                          var data = JSON.stringify(jsondata);
                          thegrid.addJSONData(JSON.parse(data));
                      }
                  }
              });
          },
          colNames: ['HR ID', 'Employee Id', 'Full Name', 'Designation', 'Location Code'],
          colModel: [
              { key: true, hidden: true, name: 'HRId', index: 'HRId', editable: false },
              { key: false, name: 'EmployeeId', index: 'EmployeeId', editable: false, width: 100 },
              { key: false, name: 'FullName', index: 'FullName', editable: false, width: 100 },
              { key: false, name: 'Designation', index: 'Designation', editable: false, width: 100 },
              { key: false, name: 'LocationCode', index: 'LocationCode', editable: false, width: 100 }
          ],
          pager: $('#pager'),
          viewrecords: true,
          loadonce: true,
          rowNum: 10,
          height: '100%',
          width: '100%',
          autowidth: true
      });
  }
  </code></pre>