Question

我正在尝试在JQGrid中实现服务器端分页。任何身体都可以帮助我实现它。目前客户端在我的网格中工作正常，但想将其更改为服务器端。

Answer 1

取自：http://yassershaikh.com/how-to-use-jqgrid-with-asp-net-mvc/

如果你曾经使用过JqGrid，那么毫无疑问你会熟悉传递给任何ajax请求的默认参数：“page”，“rows”，“sidx”＆amp; “SORD”。这些参数分别对应于当前页面，每页记录，排序列和排序顺序。

下面的屏幕截图将帮助您更好地理解这一点。

enter image description here

所以，为了解决这个问题，我准备了一个名为'JqGridObject'的类。

public class JqGridObject  
{  
    public string Page { get; set; }  
    public int PageSize { get; set; }  
    public string SortColumn { get; set; }  
    public string SortOrder { get; set; }  
    public List<Fruit> Data { get; set; }  
}

public class Fruit  
{  
    public int Id { get; set; }  
    public string Name { get; set; }  
}

使用此JqGridObject类从控制器发送json数据

public ActionResult GetJqGridData(string page, string rows, string sidx, string sord)
{
    var jqGridData = new JqGridObject()
    {
        Data = GetSomeSampleData(),
        Page = page,
        PageSize = 3, // u can change this !
        SortColumn = sidx,
        SortOrder = sord
    };

    return Json(jqGridData, JsonRequestBehavior.AllowGet);
}

public List<Fruit> GetSomeSampleData()
{
    return new List<Fruit>
    {
        new Fruit{Id = 1, Name = "Apple" },
        new Fruit{Id = 2, Name = "Melon" },
        new Fruit{Id = 3, Name = "Orange" },
        new Fruit{Id = 4, Name = "Grapes" },
        new Fruit{Id = 5, Name = "Pineapple" },
        new Fruit{Id = 6, Name = "Mango" },
        new Fruit{Id = 7, Name = "Bannana" },
        new Fruit{Id = 8, Name = "Cherry" }
    };
}

JqGrid jquery调用。

<script type="text/javascript">  
    $(document).ready(function () {
        $("#myGrid").jqGrid({
            url: '@Url.Action("GetJqGridData")',
            datatype: 'json',
            myType: 'GET',
            colNames: ['Id', 'Name'],
            colModel: [
                { name: 'Id', index: 'Id' },
                { name: 'Name', index: 'Name' }
            ],
            jsonReader: {
                root: 'Data',
                id: 'id',
                repeatitems: false
            },
            pager: $('#myPager'),
            rowNum: 5,
            rowList: [2, 5, 10],
            width: 600,
            viewrecords: true,
            caption: 'Jqgrid MVC Tutorial'
        });
    });
</script>

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

Answer 2

我在jqgrid中看到了许多服务器端分页的选项，但它们都不能满足我们的要求。

我所做的是在查询字符串中放置LIMIT：startLimit，：endLimit。

根据记录启用和禁用nextPager和prevPager。

假设我想为每个页面显示5条记录，

var startLimit=0;
var endLimit=5;

当用户点击＆＃34; NEXT＆＃34; ，

$("#next_pager").click(function () {
    startLimit =  startLimit+ endLimit;
    // here comes your AJAX call with passing two parameter(startLimit,endLimit)
});

当用户点击＆＃34;上一页＆＃34; ，

$("#prev_pager").click(function (){
    if  (startLimit == 0)
    {
        $("#prev_pager").addClass("ui-state-disabled"); //disable previous pager icon
    }
    else
    {
        startLimit =  startLimit - endLimit;
    }
});

更改页码：

初始化一个变量：var pageInputValue=1;

当用户点击＆＃34; NEXT＆＃34; ，

$(".ui-pg-input").val(eval(parseInt(pageInputValue)+1));
pageInputValue = eval(parseInt(pageInputValue)+1);

当用户点击＆＃34;上一页＆＃34; ，

$(".ui-pg-input").val(eval(parseInt(pageInputValue)-1));
pageInputValue = eval(parseInt(pageInputValue)-1);

更改View Records @ Botton Right：

if(eval(startLimit+endLimit) > result)
{
    $(".ui-paging-info").text("View "+eval(startLimit+1) +" - "+result+" of "+result);
}
else
{
    $(".ui-paging-info").text("View "+eval(startLimit+1) +" - "+eval(startLimit+endLimit)+" of "+result);
}

如果你觉得它很有用，那就算一算吧。

JQGrid中的服务器端分页

2 个答案: