87,997
社区成员
发帖
与我相关
我的任务
分享关于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>
...全文
请发表友善的回复…
发表回复
囧 2019-05-10
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/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 sortData(data, sortName, sortOrder){
data.sort(function(a, b){
a = a[sortName];
b = b[sortName];
var ret = 0;
if(a > b){
ret = 1;
}else if(a < b){
ret = -1;
}
return sortOrder == 'asc' ? ret : -ret;
});
}
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);
}
if(opts.sortName){
sortData(data.originalRows, opts.sortName, opts.sortOrder);
}
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>
Hello World, 2019-05-10
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js"></script>
<script src="../../Script/jquery-easyui-1.4/jquery.min.js"></script>
<script src="../../Script/jquery-easyui-1.4/jquery.easyui.min.js"></script>
<script src="../../Script/jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script>
<link href="../../Script/jquery-easyui-1.4/themes/metro/easyui.css" rel="stylesheet" />
<link href="../../Script/jquery-easyui-1.4/themes/icon.css" rel="stylesheet" />
<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,
onBeforeSortColumn: onBeforeSortColumn
});
});
var colConfig1 = [[
{ field: 'id', title: 'id', width: 100 },
{ field: 'val', title: 'val', width: 100 },
{ field: 'val2', title: 'val2', width: 100, sortable: true }
]];
//val2如果是字符类型，在排好序取数之后还会被排一次，按字符排序'2'比'12'大
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 }
]
};
json_1.total = json_1.rows.length;
function pagerFilter(data) {
data = JSON.parse(JSON.stringify(json_1));
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 onBeforeSortColumn(sort, order) {
if (order.toUpperCase() === 'DESC')
order = -1
else
order = 1;
json_1.rows.sort(function (a, b) {
if (parseFloat(a[sort]) > 1 * b[sort])
return 1 * order;
else if (a[sort] * 1 < 1 * b[sort])
return -1 * order;
else
return 0;
});
return true;
}
</script>
</head>
<body>
<div>
<table id="dg"></table>
</div>
</body>
</html>Hello World, 2019-05-10
- 打赏
- 举报
可以在onBeforeSortColumn事件中去对整个数据进行自定义的排序并获取当前页数据，然后设置数据
