如何在ASP.net MVC中的jqgrid中进行排序/分页

时间:2016-06-06 07:45:01

标签: asp.net-mvc sorting pagination jqgrid-asp.net

首先是ASP.NET MVC的新手。

我想使用存储过程在JqGrid中进行自定义排序和分页。存储过程的参数是StartIndexPageSizeSortExpression

如何获取当前页面详细信息和排序详细信息以及如何在jqgrid中的每个导航上调用我的操作方法?

据我所知,存储过程方面没问题。但是当我第一次加载时会检索到10条记录。记录总数为16.但是我无法看到第2页或控件导航到预期的下一页。

$(function () {
    $("#myGrid").jqGrid({
        url: '/Request/GetRequests/',
        datatype: 'json',
        mytype: 'get',
        colNames: ['RequestType', 'RequestFrom', 'Summary', 'Status', 'CreatedDate', 'RequestID'],
        colModel: [
              { name: 'RequestType', index: 'RequestType', width: 200 },
              { name: 'FromName', index: 'FromName', width: 200 },
              { name: 'Summary', index: 'Summary', width: 350 },
              { name: 'RequestStatus', index: 'RequestStatus', width: 150 },
              { name: 'CreatedDate', index: 'CreatedDate', width: 150 },                  
              { name: 'RequestID', index: 'RequestID', width: 150 }
        ],
        pager: $('#myPager'),
        rowNum: 10,
        sortname: 'CreatedDate',
        gridview: true,
        sortorder: 'desc',
        loadonce: true,
        rowList: [5, 10, 20, 50],
        width: 1100,
        height: 900,
        viewrecords: true,
        caption: 'Request Details',
        onSelectRow: function ()
        {

        }
    });
    //var j = jQuery.noConflict();
    //j('.datepicker').datepicker();
});



         <table id="myGrid"></table>
           <div id="myPager"></div>

行动方法:

[HttpGet]
public JsonResult GetRequests(string sidx, string sord, int page, int rows)
{
        RequestRepository edb = new RequestRepository();

        int pageIndex = page;
        int pageSize = rows;
        int startRow = (pageIndex * pageSize) + 1;
        RequestNavigation data = edb.RequestGetParam(page, rows, sidx, sord);
        int totalRecords = data.totalRecords;
        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
        var jsonData = new
        {
            total = totalPages,
            page,
            records = totalRecords,
            rows = data.RequestDetails.ToArray()
        };
        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }

enter image description here

1 个答案:

答案 0 :(得分:1)

我找到了解决方案。

这是jqgrid属性中的一个简单问题loadonce:true我们必须将其更改为loadonce:false

在javascript中:

 ...
gridview: true,
sortorder: 'desc',
loadonce: true,
rowList: [5, 10, 20, 50],

...

变为

...
gridview: true,
sortorder: 'desc',
loadonce: false,
rowList: [5, 10, 20, 50],

...