JqGrid加載每次下一次點擊分頁

Question

我在JqGrid綁定數據按鈕單擊併成功完成。但是當我點擊旁邊的分頁時，數據會再次綁定函數調用並顯示相同的頁面，即1.不移動到第二頁。請幫助我。

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 
    }); 
} 

Answer 1

我會建議你從不使用datatype定義函數，如果數據可以用jQuery.ajax被加載。

你應該做到以下幾點：

1. 的jqGrid升級到最新free jqGrid（4.12.1）。
2. 更換datatype到datatype: "json"

這是更好的只是你使用下面的代碼SearchEmployee函數內

$("#grid").jqGrid("GridUnload"); 
$("#grid").jqGrid({ 
    datatype: "json", 
    url: "/Common/EmployeeSearchData/", 
    mtype: "POST", 
    ajaxGridOptions: { contentType: "application/json; charset=utf-8" }, 
    prmNames: { id: "HRId" }, // the name of id property 
    serializeGridData: function() { 
     return JSON.stringify({ 
        objEmpModel: { 
         EmployeeId: $("#EmployeeId").val(), 
         F_Name: $("#F_Name").val(), 
         L_Name: $("#L_Name").val() 
        } 
       }); 
    }, 
    colNames: ["Employee Id", "Full Name", "Designation", "Location Code"], 
    colModel: [ 
     { name: "EmployeeId" }, 
     { name: "FullName" }, 
     { name: "Designation" }, 
     { name: "LocationCode" } 
    ], 
    additionalProperties: ["HRId"], // include HRId in local data 
    cmTemplate: { width: 100 }, // optional if you want to remove autowidth:true option 
    pager: true, 
    rowNum: 10, 
    viewrecords: true, 
    loadonce: true, 
    forceClientSorting: true, 
    autowidth: true 
);