easyui datagrid本地分页排序

html代码

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

js代码

  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;
    }

引用easyui的js

    <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>