标签: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,熟悉后再灵活运用写出适合你的业务的网页,以前一直在用别人封装好的,用完后你换个环境你还是不会写,所以这些基础的东西还是很有必要的。但是不能只低头写这些基础,更要抬头看看整个项目的模型和整体框架,你才有更高的提升。
版权声明:本文为博主原创文章,未经博主允许不得转载。
标签:javascript 分页
原文地址:http://blog.csdn.net/lxy344x/article/details/47452987