nayi_224 辽大 java  2019年05月09日
关于easyui表格 前台分页排序的问题
数据量比较少,因此我准备把数据一次性加载,并在前端分页、列排序。

现在的问题是,排序只针对当前页,我需要的是针对全部数据进行排序。

对于下面的代码,要如何修改?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js"></script>
<script src="../../../js/jquery-easyui-1.7.0/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../../../js/jquery-easyui-1.7.0/themes/default/easyui.css"/>
<script src="../../../js/jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<script type="text/javascript">
jQuery(function(){
jQuery("#dg").datagrid({
remoteSort:false,
rownumbers:true,
singleSelect:true,
autoRowHeight:false,
pagination:true,
pageSize:2,
pageList: [1, 2, 3, 4, 5],
columns: colConfig1,
loadFilter:pagerFilter,
data: json_1.rows
});

});

var colConfig1 = [[
{field:'id',title:'id',width:100},
{field:'val',title:'val',width:100},
{field:'val2',title:'val2',width:100,sortable:true}
]];

var json_1 = {"rows":[
{"id":"i1","val":"11","val2":"2"},
{"id":"i2","val":"11","val2":"12"},
{"id":"i2","val":"11","val2":"32"},
{"id":"i2","val":"11","val2":"42"},
{"id":"i3","val":"21","val2":"52"}],
};

function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function'){ // is array
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;
}

</script>
</head>
<body>
<div>
<table id="dg"></table>
</div>
</body>

</html>



...全文
48 点赞 收藏 3
写回复
3 条回复

还没有回复,快来抢沙发~

发动态
发帖子
JavaScript
创建于2007-09-28

5.1w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript
社区公告
暂无公告