最近项目上，自作主张的用了EasyUI的Datagrid，本机测试发现，EasyUI的这个组件在大量数据（测试数据大约20W）的时候，在IE下的表现差得令人发指，在非IE的情况下，效率倒是还可以接受。然而不幸的是，目标浏览器正是IE5-9，再加上目标数据量预计不会小于350W...
正题开始，下面贴上最开始编写的代码：
<table id="dg" title="" style="width:100%;height:500px; "></table>
<script>
function getData1(objStr){
var obj = eval(objStr);
var rows = [];
if(typeof(obj.length) == "undefined" || obj.length == 0){
init();
}else{
for(var i=0; i<obj.length; i++){
rows.push({
a0110: obj[i].a0110,
a0112: obj[i].a0112,
a0113: obj[i].a0113,
a0114: obj[i].a0114,
a0115: obj[i].a0115,
a0116: obj[i].a0116,
a0117: obj[i].a0117,
a0109: obj[i].a0109
});
}
}
return rows;
}
function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function'){
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',data);
}
});
if (!data.originalRows){
data.originalRows = (data.rows);
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
function init(){
var mheight = $(window).height()*0.99-72;
$('#dg').datagrid({
width: ($(window).width()*0.99),
height:mheight,
fit : false,
striped : true,
rownumbers : true,
fitColumns : true,
pagination : true, // 分页栏关闭
singleSelect : true,
pageSize : 50,// 分页大小
pageList : [ 50, 100, 150, 300, 500],
columns:[[
{field:'a0112',title:'NAME',width:'20%',align:'left',halign:'center'},
{field:'a0113',title:'TIME',width:'10%',align:'center',halign:'center'},
{field:'a0114',title:'CODE',width:'10%',align:'center',halign:'center'},
{field:'a0115',title:'TYPE',width:'18%',align:'center',halign:'center'},
{field:'a0116',title:'NUMBER OF ...',width:'10%',align:'center',halign:'center'},
{field:'a0117',title:'NUMBER OF ...',width:'10%',align:'center',halign:'center'},
{field:'a0119',title:'NUMBER OF ...',width:'10%',align:'center',halign:'center'},
{field:'a0110',title:'NUMBER OF ...',width:'10%',align:'center',halign:'center'}
]]
}
);
}
$(function(){
$('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData1({}));
init();
});
<script>
==============================================
这种方式是实现的形式是：
通过一次完全加载所有结果集到前端，通过前端的EasyUI组件来实现分页。
这种方式我称为假分页或者是前端分页。
在数据量小的时候，这种实现是可行的。然而到了大数据量的时候，前端开始出现响应缓慢，在IE8下加载20W数据，甚至让浏览器卡住几分钟无响应。
显然这种方式并不能解决我的需求。所以反反复复翻了EasyUI中提供的示例，终于找见了所谓的真分页实现方式。
==============================================
下面贴出修改后的源码：
<table id="dg" title="" style="width:100%;height:500px; "></table>
<script>
function init(){
var mheight = $(window).height()*0.99-72;
$('#dg').datagrid({
url:"${ctx}/mSearch.do?m=search&type=notSearch",
method:'get',
width: ($(window).width()*0.99),
height:mheight,
pageSize : 50,// 分页大小
pageList : [ 50, 100, 150, 300, 500],
fit : false,
loadMsg: '数据加载中,请稍候...',
rownumbers : true,
fitColumns : false,
pagination : true, // 分页栏关闭
singleSelect:true,
columns:[[
{field:'a0112',title:'NAME',width:'20%',align:'left',halign:'center'},
{field:'a0113',title:'TIME',width:'10%',align:'center',halign:'center'},
{field:'a0114',title:'CODE',width:'10%',align:'center',halign:'center'},
{field:'a0115',title:'TYPE',width:'18%',align:'center',halign:'center'},
{field:'a0116',title:'NUMBER OF ...',width:'10%',align:'center',halign:'center'},
{field:'a0117',title:'NUMBER OF ...',width:'10%',align:'center',halign:'center'},
{field:'a0119',title:'NUMBER OF ...',width:'10%',align:'center',halign:'center'},
{field:'a0110',title:'NUMBER OF ...',width:'10%',align:'center',halign:'center'}
]]
}
);
}
$(function(){
init();
});
function searchByGin(url){
$('#dg').datagrid({
url:url,
method:'POST'
});
var pager = $('#dg').datagrid().datagrid('getPager'); // get the pager of datagrid
pager.pagination({
});
}
</script>
=============================================
这种分页方式的实现是这样的：
每次当当前页发生改变的时候，会向后台发两个参数：page和rows，page是当前页的标识，rows是每页显示的记录数的标识，通过这两个参数，便可以轻松的在后台实现分页功能。
=============================================
先记录如上，待日后备用~
