EasyUI中使用分页

🚒 前端设置使用分页功能

在datagrid中使用分页功能，有如下常用属性：

• pagination:bool // 开启分页
• pageList:[5,10,20,30,40,50]//供选择的每页有多少记录
• pageSize:20 //每页显示的记录数，默认20

🚔 后端返回对应的数据

从后台返回的数据封装成如下格式

return new {
	total:300, //一共有多少记录
  rows:list // 当前分页的数据
}

🍂例子

前端绑定

function EGridInit() {
    $('#grid').edatagrid({
        url: 'Action/ProductSample/ProductSList',
        saveUrl: 'Action/ProductSample/ProductSSave',
        updateUrl: 'Action/ProductSample/ProductSSave',
        destroyUrl: 'Action/ProductSample/ProductSDel',
        idField: 'id',
        singleSelect: true,
        rownumbers: true,
        toolbar: '#toolbar',
        fitColumns: false,
        pagination:true,
        pageList : [ 5, 10, 20, 30, 40, 50, 100 ],// 可以设置每页记录条数的列表
        pageSize : 20,// 每页显示的记录条数，默认为10
        fit: true,
        border: true,
        columns: [[
            { field: 'date', title: '日期', rowspan: 2, width: 100, align: 'center', editor: { type: 'datebox', options: { required: true } } },
            { field: 'type', title: '煤种', rowspan: 2, width: 80, align: 'center', editor: { type: 'textbox', options: { required: true } } },
            { field: 'meiliang_609', title: '609煤量', rowspan: 2, width: 80, align: 'center', editor: { type: 'numberbox', options: { precision: 2 } } },
            { field: 'gongzuomian', title: '工作面', rowspan: 2, width: 80, align: 'center', editor: { type: 'textbox' } },
        ]]
    });
}

后端数据返回

public object ProductSList(DateTime? start, DateTime? end , int page , int rows)
        {
            if (start == null) start = DateTime.Now.AddDays(-20);
            if (end == null) end = DateTime.Now.AddDays(1);
            var data = EmContext.HY_ProductSample.Where(r => r.date >= start && r.time <= end).ToList();
            data =  data.Select(r => new
            {
                r.id,
                r.date,
                r.type,
            }).ToList();
            return new
            {
                total = returnData.Count,
                rows = data.GetRange(page * rows, rows)
            };
        }

效果