如何在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，“ FirstName”：“ Alan”，“ LastName”：“ Donald”，“ LastSSN”：“ 123”，“部門”：“ Bowler”，“ Age”：“ 44”，“薪水“：” 1000000“，”地址“：”南非“，” MaritalStatus“：”已婚“，” EntityState“：2，” EntityKey“：{” EntitySetName“：” tbl_Details“，” EntityContainerName“：” JQGridDBEntities“， “EntityKeyValues”：[{ “密鑰”： “ID”， “值”：1}]， “方法isTemporary”：假}}，{ “ID”：2 “姓”： “唐納德”， “名字”：” Duck”，“ LastSSN”：“ 345”，“ Department”：“ Actor”，“ Age”：“ 98”，“ Salary”：“ 2000000”，“ Address”：“ USA”，“ MaritalStatus”：null，” EntityState “：2”，的EntityKey “：{” EntitySetName “：” tbl_Details “ ”EntityContainerName“： ”JQGridDBEntities“， ”EntityKeyValues“：[{ ”密鑰“： ”ID“， ”值“：2}]，” 方法isTemporary “：假}}，{” ID “：3”，姓 “：” Virat “ ”名字“： ”科利“， ”LastSSN“： ”111“， ”部“： ”擊球手“， ”年齡“：” 28“，” Salary“：” 1000000“，” Address“：”印度“，” MaritalStatus“：”未知“，” EntityState“：2，” EntityKey“：{” EntitySetName“：” tbl_Details“，” EntityContainerName“： “JQGridDBEntities”， “EntityKeyValues”：[{ “密鑰”： “ID”， “值”：3}]， “方法isTemporary”：假}}，{ “ID”：4 “姓” ：“ MS”，“ LastName”：“ Dhoni”，“ LastSSN”：“ 112”，“部門”：“船長”，“年齡”：“ 31”，“薪水”：“ 9000000”，“地址”：“印度”，“ MaritalStatus”：“已婚”，“ EntityState”：2，“ EntityKey”：{“ EntitySetName”：“ tbl_Details”，“ EntityContainerName”：“ JQGridDBEntities”，“ EntityKeyValues”：[{“ Key”：“ ID “ ”值“：4}]， ”方法isTemporary“：假}}，{ ”ID“：5 ”姓“： ”薩欽“， ”名字“： ”泰杜爾卡“， ”LastSSN“： ”113“，”部門”：“超人”，“年齡”：“ 40”，“工資”：“ 90000000”，“地址”：“印度”，“婚姻狀況”：“已婚”，“ EntityState”：2，“ EntityKey”：{ “EntitySetName”： “tbl_Details”， “EntityContainerName”： “JQGridDBEntities”， “EntityKeyValues”：[{ “密鑰”： “ID”， “值”：5}]， “方法isTemporary”：假}}，{ “ID” ：6，“ FirstName”：“ Virendra”，“ LastName”：“ Sehwag”，“ LastSSN”：“ 114”，“ Department”：“ Batsman”，“ Age”：“ 36”，“ Salary”：“ 8000000” ，“地址”：“印度”，“婚姻狀況”：“已結婚”，“實體狀態”：2，“實體關鍵字”：{“實體集名稱”：“ tbl_Details”，“實體容器名稱”：“ JQGridDBEntities”，“實體關鍵字值”：[[ “密鑰”： “ID”， “值”：6}]， “方法isTemporary”：假}}，{ “ID”：7， “姓”：“Zaheer這樣 “，” LastName“：” Khan“，” LastSSN“：” 115“，”部門“：” Bowler“，” Age“：” 36“，” Salary“：” 3000000“，” Address“：”印度“， “ MaritalStatus”：“已結婚”，“ EntityState”：2，“ EntityKey”：{“ EntitySetName”：“ tbl_Details”，“ EntityContainerName”：“ JQGridDBEntities”，“ EntityKeyValues”：[{“ Key”：“ ID”，“值 “：7}]，” 方法isTemporary “：假}}，{” ID “：8中，” 姓 “：” 演示”， “名字”： “演示”， “LastSSN”： “演示”， “部”： “ Demo”，“ Age”：“ Demo”，“ Salary”：“ Demo”，“ Address”：“ Demo”，“ MaritalStatus”：“ Demo”，“ EntityState”：2，“ EntityKey”：{“ EntitySetName” ： “tbl_Details”， “EntityContainerName”： “JQGridDBEntities”， “EntityKeyValues”：[{ “密鑰”： “ID”， “值”：8}]， “方法isTemporary”：假}}，{ “ID”：9， “ FirstName”：“ Demo”，“ LastName”：“ Demo”，“ LastSSN”：“ Demo”，“部門”：“ Demo”，“ Age”：“ Demo”，“薪水”：“ Demo”，“地址“：” Demo“，” MaritalStatus“：” Demo“，” EntityState“：2，” EntityKey“：{” EntitySetName“：” tbl_Details“，” EntityContainerName“：” JQGridDBEntities“，” EntityKeyValues“：[{” Key“ ： “ID”， “值”：9}]， “方法isTemporary”：假}}，{ “ID”：10， “姓”： “演示”， “名字”： “演示”， “LastSSN”：“演示“ ，“部門”：“演示”，“年齡”：“演示”，“薪水”：“演示”，“地址”：“演示”，“婚姻狀況”：“演示”，“ 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操作的參數。

或者，您可以使用prmNames選項（請參閱文檔 ）來通知jqGrid使用其他參數名稱作為默認page和rows 。 例如，您可以添加選項

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

解決您的問題。