码迷,mamicode.com
首页 > Web开发 > 详细

js实现EasyUI-datagrid前台分页

时间:2015-08-12 23:39:35      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:javascript   分页   


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

      这两种分页方式是怎么回事呢?所谓真分页就是从数据库中查询出需要展示的条数,比如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,熟悉后再灵活运用写出适合你的业务的网页,以前一直在用别人封装好的,用完后你换个环境你还是不会写,所以这些基础的东西还是很有必要的。但是不能只低头写这些基础,更要抬头看看整个项目的模型和整体框架,你才有更高的提升。

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

js实现EasyUI-datagrid前台分页

标签:javascript   分页   

原文地址:http://blog.csdn.net/lxy344x/article/details/47452987

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!