jqgrid-asp.net - JQGrid 中的服务器端分页

Question

我正在尝试在 JQGrid 中实现服务器端分页。任何机构都可以帮助我如何实现它。目前客户端在我的网格中运行良好，但想将其更改为服务器端。

Answer 1

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

如果您之前使用过 JqGrid，那么您无疑会熟悉传递给任何 ajax 请求的默认参数：“page”、“rows”、“sidx”和“sord”。这些参数分别对应当前页、每页记录、排序列和排序顺序。

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

因此，为了处理这个问题，我准备了一个名为“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" }
    };
}

JqG​​rid 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;

当用户点击“NEXT”时，

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

当用户点击“上一个”时，

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

更改页码：

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

当用户点击“NEXT”时，

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

当用户点击“上一个”时，

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

要更改查看记录@ 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);
}

如果你觉得它有用，就让它发挥作用。