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