js实现EasyUI-datagrid前台分页

牛腩新闻发布系统中讲到过两种分页的方式：真分页与假分页

这两种分页方式是怎么回事呢？所谓真分页就是从数据库中查询出需要展示的条数，比如10条，下次我再要展示25条的时候它再次访问数据库，查询前25条过来。这样有什么好处呢？减少了数据的传输量提高了第一次查询的速度。适合数据量大的查询。假分页呢？它一次请求后将数据库中所有符合条件的数据返回到前台，然后再查询前25条时它直接将所有数据的前25条展示出来。这样做第一次查询会降低性能，但是后续显示页后速度会很好，它都在缓存里，适合数据量交小的查询。

今天要写的EasyUI-datagrid 分页也是如此，先介绍假分页，之后再写MySQL 分页存储过程实现真分页。

首先js中写关于假分页的代码

//实现假分页
function myLoader(param, success, error) {
    var that = $(this);
    var opts = that.datagrid("options");
    if (!opts.url) {
        return false;
    }
    var cache = that.data().datagrid.cache;
    if (!cache) {
        $.ajax({
            type: opts.method,
            url: opts.url,
            data: param,
            dataType: "json",
            success: function (data) {
                that.data().datagrid['cache'] = data;
                success(bulidData(data));
            },
            error: function () {
                error.apply(this, arguments);
            }
        });
    } else {
        success(bulidData(cache));
    }

    function bulidData(data) {
        var temp = $.extend({}, data);
        var tempRows = [];
        var start = (param.page - 1) * parseInt(param.rows);
        var end = start + parseInt(param.rows);
        var rows = data.rows;
        for (var i = start; i < end; i++) {
            if (rows[i]) {
                tempRows.push(rows[i]);
            } else {
                break;
            }
        }
        temp.rows = tempRows;
        return temp;
    }
}

其次加载datagrid时的调用

 $('#dg').datagrid({
                    loadMsg: '正在努力为您加载数据',
                    url: 'Handler.ashx?action=GetData' + "&Id=" +Id,
                    fitColumn: false,
                    pageNumber: 1,
                    pagination: true,//分页控件
                    rownumbers: true,//显示行号
                    pageSize: 3,
                    pageList: [3, 15, 50, 100],
                    loader: <span style="color:#ff0000;">myLoader</span>, //前端分页加载函数
                    onLoadSuccess: function (data) {
                        $("#dg").data().datagrid.cache = null;//清除datagrid 缓存，保证前台假分页；
                       //$('#dg').datagrid('reload');显示更新后的数据
                    }
                });

上述中的清除缓存的很有必要，我出现的问题是第一次加载完数据后更新参数如果后台有数据，那么datagrid会更新内容，如果是后台没有返回数据的话，它依旧显示原来的数据。

最近一直在从最基础的写网页来写客户端，最大的感触就是多看API，熟悉后再灵活运用写出适合你的业务的网页，以前一直在用别人封装好的，用完后你换个环境你还是不会写，所以这些基础的东西还是很有必要的。但是不能只低头写这些基础，更要抬头看看整个项目的模型和整体框架，你才有更高的提升。

版权声明：本文为博主原创文章，未经博主允许不得转载。