如何在JQGRID中应用自定义分页

Question

我有一个Jqgrid，在我的MVC视图中，在显示网格中的数据时没有问题。但我想在网格中应用自定义分页，所以我在我的控制器中创建了两个参数（pageNumber和rowSize）并根据这两个参数返回数据的方法。 现在我的问题是，如何将这两个网格属性发送到控制器，并获得网格上反映的变化。

注意：我也尝试使用按钮点击ajax发送rowSize的值，但在服务器中执行代码后没有更改网格（如我所料）。

检视：

<table id="jQGridDemo"> 
</table> 
<div id="jQGridDemoPager"> 
</div> 
<script type="text/javascript"> 
    jQuery("#jQGridDemo").jqGrid({ 

     datatype: "json", 
     colNames: ['Id', 'First Name', 'Last Name', 'Last 4 SSN', 'Department', 
       'Age', 'Salary', "Address", 'Marital Status'], 
     colModel: [ 
       { name: 'ID', index: '_id', width: 20, stype: 'text' }, 
       { name: 'FirstName', index: 'FirstName', width: 150 }, 
       { name: 'LastName', index: 'LastName', width: 150 }, 
       { name: 'LastSSN', index: 'LastSSN', width: 100 }, 
       { name: 'Department', index: 'Department', width: 80, align: "right" }, 
       { name: 'Age', index: 'Salary', width: 80, align: "right" }, 
       { name: 'Salary', index: 'Salary', width: 80, align: "right" }, 
       { name: 'Address', index: 'Address', width: 150, sortable: false }, 
       { name: 'MaritalStatus', index: 'MaritalStatus', width: 100, sortable: false } 
       ], 
     rowNum: 10, 
     loadonce: false, 
     rowList: [5, 10, 20, 50], 
     pager: "#jQGridDemoPager", 
     height: "100%", 
     sortname: 'ID', 
     viewrecords: true, 
     sortorder: "desc", 
     caption: "List Employee Details", 
     url: '/Home/Records' 
    }); 

    $(".ui-pg-input").click(function() { 

     alert(this.value); 
     $.ajax({ 
      type: 'POST', 
      url: window.location + "Home/Records", 
      data: { 
       pageNumber: this.value 
      }, 
      success: function (data) { 
       alert("ajax call completed"); 
      }, 
      error: function() { 
       alert("Something went Wrong"); 
      } 
     }); 
    }) 
</script> 

控制器

public JsonResult Records(int pageNumber=3, int rowSize = 5) 
{ 
    // code for custom paging 
    return json; 
} 

JSON传回服务器：

[{ “ID”：1， “姓”： “阿兰”，“姓氏”： “Donald”，“LastSSN”，“123”，“Department”，“Bowler”，“年龄”：“44”，“薪水”：“1000000”，“地址”：“南非”，“MaritalStatus”已婚“，”EntityState“：2，”EntityKey“：{”EntitySetName“：”tbl_Details“，”EntityContainerName“：”JQGridDBEntities“，”EntityKeyValues“：[{”Key“：”ID“，”Value“ ]， “方法isTemporary”：假}}，{ “ID”：2 “姓”： “唐纳德”， “名字”： “鸭”， “LastSSN”： “345”， “部”： “演员”，”年龄“：”98“，”薪水“：”2000000“，”地址“：”美国“，”MaritalStatus“：null，”EntityState“：2，”EntityKey“：{”EntitySetName“：”tbl_Details“EntityContainerName “：” JQGridDBEntities”， “EntityKeyValues”：[{ “密钥”： “ID”， “值”：2}]， “方法isTemporary”：假}}，{ “ID”：3 “姓”： “Virat” ，“姓氏”：“Kohli”，“LastSSN”：“111”，“部门”：“击球手”，“年龄”：“28”，“薪水”：“1000000”，“地址”：“印度” MaritalStatus“：”Unknown“，”EntityState“：2，”EntityKey“：{”EntitySetName“：”tbl_Details“，”EntityContainerName“：”JQGridDBEntities“，”EntityKeyValues“：[{”Key“：”ID“ “：3}]，” 方法isTemporary “：假}}，{” ID “：4”，姓 “：” MS “ ”名字“： ”纵帆船“， ”LastSSN“：” 112“，”部门“：”船长“，”年龄“：”31“，”薪水“：”9000000“，”地址“：”印度“，”MaritalStatus“：”已婚“，”EntityState“的EntityKey “：{” EntitySetName “：” tbl_Details”， “EntityContainerName”： “JQGridDBEntities”， “EntityKeyValues”：[{ “密钥”： “ID”， “值”：4}]， “方法isTemporary”：假}}， {“ID”：5，“FirstName”：“Sachin”，“LastName”：“Tendulkar”，“LastSSN”：“113”，“部门”：“超人”，“年龄”：“40” ：“90000000”，“地址”：“印度”，“MaritalStatus”：“已婚”，“EntityState”：2，“EntityKey”：{“EntitySetName”：“tbl_Details”，“EntityContainerName”：“JQGridDBEntities”，“EntityKeyValues “：[{” 密钥 “：” ID”， “值”：5}]， “方法isTemporary”：假}}，{ “ID”：6， “姓”： “Virendra”， “名字”： “施瓦格” ，“LastSSN”：“114”，“部门”：“击球手”，“年龄”：“36”，“薪水”：“8000000”，“地址”：“印度”，“MaritalStatus” EntityState “：2”，的EntityKey “：{” EntitySetName “：” tbl_Details “ ”EntityContainerName“： ”JQGridDBEntities“， ”EntityKeyValues“：[{ ”密钥“： ”ID“， ”值“：6}]，” 方法isTemporary “：假}}，{” ID “：7，” 姓 “：” Zaheer这样 “ ”名字“： ”汗“， ”LastSSN“：” 11 5“，”部门“：”Bowler“，”年龄“：”36“，”薪水“：”3000000“，”地址“：”印度“，”MaritalStatus“：”已婚“，”EntityState“的EntityKey “：{” EntitySetName “：” tbl_Details”， “EntityContainerName”： “JQGridDBEntities”， “EntityKeyValues”：[{ “密钥”： “ID”， “值”：7}]， “方法isTemporary”：假}}， “Demo”，“LastName”，“演示”，“LastName” ：“演示”，“地址”：“演示”，“MaritalStatus”：“演示”，“EntityState”：2，“EntityKey”：{“EntitySetName”：“tbl_Details”，“EntityContainerName”：“JQGridDBEntities”，“EntityKeyValues “：[{” 密钥 “：” ID”， “值”：8}]， “方法isTemporary”：假}}，{ “ID”：9 “姓”： “演示”， “名字”： “演示” “演示”，“部门”：“演示”，“年龄”：“演示”，“工资”：“演示”，“地址”：“演示”，“MaritalStatus”：“演示”，“ EntityState “：2”，的EntityKey “：{” EntitySetName “：” tbl_Details “ ”EntityContainerName“： ”JQGridDBEntities“， ”EntityKeyValues“：[{ ”密钥“： ”ID“， ”值“：9}]，” 方法isTemporary “：假}}，{” ID “：10，” 名字 “：” 演示”， “名字”： “演示”， “LastSSN”： “演示”， “部”： “演示”， “年龄” ：“Demo”，“Salary”：“Demo”，“Address”：“Demo”，“MaritalStatus”：“Demo”，“EntityState”：2，“EntityKey”：{“EntitySetName”：“tbl_Details”，“EntityContainerName “：” JQGridDBEntities”， “EntityKeyValues”：[{ “关键”： “ID”， “值”：10}]， “方法isTemporary”：假}}]

Answer 1

我觉得有误解如何jqGrid的作品。如果您不使用loadonce: true选项，请使用jqGrid自动发送请求至url，并附加指定页面大小和请求页面的参数。所以你不需要很多$.ajax，你不需要绑定$(".ui-pg-input").click。基于1的“页码”参数的默认名称是page，“行大小”参数的名称是rows。所以你只需要重命名参数Records的动作。

或者您可以使用的jqGrid的prmNames选项（参见the documentation）通知的jqGrid使用其他参数名称默认page和rows。例如，您可以添加选项

prmNames: {page: "pageNumber", rows: "rowSize"} 

解决您的问题。