EasyUI Datagrid 客户端分页详解

最近在做一个小型的成绩管理系统，需要用到EasyUI Datagrid的分页功能，考虑到数据量较少（只有一个班级），于是选择客户端分页。在网上能找到的客户端分页demo基本都是同一段代码，但没有注释，下面是我根据自己的理解和调试分析写上的代码以及注释，希望能帮助大家理解EasyUI Datagrid客户端分页的执行过程

首先是Datagrid初始化代码：

$('#dg').datagrid({
            pagination:"true",
            rownumbers:"true",
            method:"get",
            toolbar:"#tb",
            pageList:[3,10],
            //每次表格加载数据都会调用此拦截器
            loadFilter:pagerFilter
        });

pagerFilter函数：

function pagerFilter(data)
    {
        //这个函数为每次表格加载数据的过滤函数，data中包含原始数据，返回的是真正要显示出来的数据
        //获取Datagrid对象
        var dg = $(this);
        //获取选项对象，此处该对象用于保存分页时的相关信息
        var opts = dg.datagrid('options');
        //获取分页器
        var pager = dg.datagrid('getPager');
        //重写表格所使用分页器的onSelectPage方法，此方法在用户选择新的页面时触发，即改变pageNum或pageSize时触发
        //此处真正的翻页逻辑并不在onSelectPage方法里面，可以看到在该方法中仅仅是将新页面的参数(pageNum, pageSize)保存在opts对象中，
        //这两个参数在后面的代码中被使用
        pager.pagination({
            onSelectPage:function(pageNum, pageSize){
                opts.pageNumber = pageNum;
                opts.pageSize = pageSize;
                //下面注释的代码我暂时不明白有什么作用，没有他们分页功能仍然能够正确实现
//                pager.pagination('refresh',{
//                    pageNumber:pageNum,
//                    pageSize:pageSize
//                });
                //此处loadData方法会加载本地数据，即data中的数据，data中包含有初次加载的所有数据
                dg.datagrid('loadData',data);
                //上述方法执行时会被pagerFilter拦截到，并对初始数据进行筛选，以达到分页的效果
            }
        });
        //真正的分页逻辑
        //第一次进入pagerFilter函数时，data中只有rows中保存了数据，并无originalRows属性，实现客户端分页时，需要在一开始将这些数据保存在
        //originalRows中，成为后续分页的基础数据，所以只要originalRows属性存在且不为空，分页时的基础数据便一直是originalRows中保存的数据
        if(!data.originalRows){
            data.originalRows =(data.rows);
        }
        //取出选择新的页面时，新页面的参数，前面已经保存在opts对象中了
        var start =(opts.pageNumber-1)*parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        //下面对初始数据进行筛选，并将结果放在data.rows中，页面每次加载时只会显示data.rows中的数据
        data.rows =(data.originalRows.slice(start, end));
        //返回data，完成分页
        return data;
    }