easyui datagrid本地分页排序

<div style="width: 300px; height:250px; margin: 10px;">
<button onclick="findData()">加载数据</button>
<table id="dg"></table>
</div>

var listData = [];
$(function(){
$('#dg').datagrid({
fit: true,
striped: true,
singleSelect: true,
pagination: true,
rownumbers: true,
remoteSort:false,   //设置为本地排序
loadMsg:"数据正在加载......",
onBeforeSortColumn:function(sort, order){
//datagrid排序前把全部数据加载进去
$("#dg").datagrid("loadData", listData);
},
onSortColumn: function (sort, order) {
//datagrid排序后记录已排序的数据并显示第一页数据
listData = $("#dg").datagrid("getData").rows;
setPage(1);
},
columns: [[
{field:'id', title:'id', width:50, sortable: true},
{field:'data', title:'data', width:100, sortable: true},
{field:'data2', title:'data2', width:100, sortable: true}
]]
});

//datagrid本地分页
$("#dg").datagrid("getPager").pagination({
onSelectPage:setPage
});
})

function findData(){
//清空排序
$("#dg").datagrid("sort",{
sortName: '', sortOrder: ''
});

//模拟异步获取数据
$("#dg").datagrid("loading");
setTimeout(function(){
listData = getAjaxData();
setPage(1);
$("#dg").datagrid("loaded");
},1000)
}

//设置页数并显示对应页数的数据
function setPage(pageNo){
var pager = $("#dg").datagrid("getPager");
var pageSize = $("#dg").datagrid('options').pageSize;
var start = (pageNo - 1) * pageSize;
var end = start + pageSize;
$("#dg").datagrid("loadData", listData.slice(start, end));
pager.pagination('refresh', {
total:listData.length,
pageNumber:pageNo
});
}

//获取数据
function getAjaxData(){
var aCode = 'A'.charCodeAt(), ZCode = 'z'.charCodeAt();
var letterLength = ZCode - aCode;
var list = [];
for(var i=1; i<=1000; i++){
var index = i % letterLength;
var data2 = String.fromCharCode(aCode + index);
list.push({
id: i,
data: 'data'+i,
data2: data2
})
}
return list;
}

<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css" />
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-groupview.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-bufferview.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-scrollview.js"></script>