一、后端分页

前端代码如下：

$gridList.dataGrid({
	url: "/api/v1/article/getgridjson",
	height: $(window).height() - 130,
	colModel: [
		{ label: "Id", name: "Id", width: 50, key: true, sortable: true },
		{ label: '标题', name: 'Title', width: 400, align: 'left', sortable: true },
		{ label: '文章分类', name: 'Category', width: 150, align: 'center', sortable: true },
		{ label: '概述', name: 'Sketch', width: 600, align: 'left' },
	 	{ label: '阅读量', name: 'ReadingCapacity', width: 100, align: 'center', sortable: true },
		{
			 label: '创建时间', name: 'CreatorTime', width: 80, align: 'left',
				formatter: "date", formatoptions: { srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s' }, sortable: true
		}
	],
	prmNames: {
		page: "page",  // 页码（第几页）
		rows: "rows",    //每页多少条数据
		sidx: "sortname",//排序列
		sord: "sortorder"//排序类型
	},
	jsonReader: {
		root: "data",        // 数据列表
		page: "currPage", // 当前第几页
		total: "totalPage", // 总共多少页
		records: "totalCount"  // 总记录数
	},
	rowNum: 20,
	rowList: [20, 50, 100, 200],
	pager: '#dataPager',
	sortable: true,
	sortorder: 'desc',
	sortname: 'CreatorTime'
});

其中，核心代码为prmNames和jsonReader。后端接口代码如下：

public ActionResult GetGridJson(Pagination pagination, string keyword = "")
{
	//业务代码，根据分页参数查询列表数据
	var data = QueryFunction(keyword);
	var resData = new { data, currPage = pagination.page, totalPage = pagination.total, totalCount = pagination.records };
	return Content(resData.ToJson());
}

pagination为分页参数实例，keyword为查询关键字。Pagination类定义如下：

    /// <summary>
    /// 分页信息
    /// </summary>
    public class Pagination
    {
        /// <summary>
        /// 每页行数
        /// </summary>
        public int rows { get; set; }
        /// <summary>
        /// 当前页
        /// </summary>
        public int page { get; set; }
        /// <summary>
        /// 排序列
        /// </summary>
        public string sidx { get; set; }
        /// <summary>
        /// 排序类型
        /// </summary>
        public string sord { get; set; }
        /// <summary>
        /// 总记录数
        /// </summary>
        public int records { get; set; }
        /// <summary>
        /// 总页数
        /// </summary>
        public int total
        {
            get
            {
                if (records > 0)
                {
                    return records % this.rows == 0 ? records / this.rows : records / this.rows + 1;
                }
                else
                {
                    return 0;
                }
            }
        }
    }

二、前端分页

前端接口代码如下：

$gridList.dataGrid({
	url: "/api/v1/article/getlist",
	height: $(window).height() - 130,
	colModel: [
		{ label: "Id", name: "Id", width: 50, key: true, sortable: true },
		{ label: '标题', name: 'Title', width: 400, align: 'left', sortable: true },
		{ label: '文章分类', name: 'Category', width: 150, align: 'center', sortable: true },
		{ label: '概述', name: 'Sketch', width: 600, align: 'left' },
	 	{ label: '阅读量', name: 'ReadingCapacity', width: 100, align: 'center', sortable: true },
		{
			 label: '创建时间', name: 'CreatorTime', width: 80, align: 'left',
				formatter: "date", formatoptions: { srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s' }, sortable: true
		}
	],
	rowNum: 20,
	rowList: [20, 50, 100, 200],
	pager: '#dataPager',
	sortable: true,
	sortorder: 'desc',
	sortname: 'CreatorTime',
    loadonce: true//开启自动分页
});

后端接口代码如下：

public ActionResult GetGridJson(string keyword = "")
{
	//业务代码，查询列表数据
	var data = QueryFunction(keyword);
	return Content(data.ToJson());
}

三、两者区别

后端分页方式：每次返回一页数据，数据传输量少，效率高，数据量大时页面访问速度也快。

前端分页方式：每次返回所有数据，数据传输量多，效率低，数据量大时页面访问速度很慢。

从代码方面来说，前端代码只是配置内容不同，重点要配置正确的参数和方式；后端代码分页和不分页复杂程度不同，且返回数据格式也不同。