1.写好json 数据

{                                                      
        "total":21,                                                      
        "rows":[                                                          
                {"code":"001","name":"Name zhangsanfeng","addr":"莆田 11","wang":"xiao"},        
                {"code":"002","name":"Name 2","addr":"Address 13","wang":"xiao"},        
                {"code":"003","name":"Name 3","addr":"Address 87","wang":"xiao"},        
                {"code":"004","name":"Name 4","addr":"Address 63","wang":"xiao"},        
                {"code":"005","name":"Name 5","addr":"Address 45","wang":"xiao"},        
                {"code":"006","name":"Name 6","addr":"Address 16","wang":"xiao"},          
                {"code":"007","name":"Name 7","addr":"Address 27","wang":"xiao"},          
                {"code":"008","name":"Name 8","addr":"Address 81","wang":"xiao"},          
                {"code":"009","name":"Name 9","addr":"Address 69","wang":"xiao"},          
                {"code":"010","name":"Name 10","addr":"Address 78","wang":"xiao"},   
                {"code":"011","name":"Name 1","addr":"Address 11","wang":"xiao"},        
                {"code":"012","name":"Name 2","addr":"Address 13","wang":"xiao"},        
                {"code":"013","name":"Name 3","addr":"Address 87","wang":"xiao"},        
                {"code":"014","name":"Name 4","addr":"Address 63","wang":"xiao"},        
                {"code":"015","name":"Name 5","addr":"Address 45","wang":"xiao"},        
                {"code":"016","name":"Name 6","addr":"Address 16","wang":"xiao"},          
                {"code":"017","name":"Name 7","addr":"Address 27","wang":"xiao"},          
                {"code":"018","name":"Name 8","addr":"Address 81","wang":"xiao"},          
                {"code":"019","name":"Name 9","addr":"Address 69","wang":"xiao"},          
                {"code":"020","name":"Name 10","addr":"Address 78","wang":"xiao"},
                {"code":"021","name":"Name 10","addr":"Address 78","wang":"xiao"},
{"code":"022","name":"Name 10","addr":"Address 78","wang":"xiao"},
{"code":"023","name":"Name 10","addr":"Address 78","wang":"xiao"}
,{"code":"024","name":"Name 10","addr":"Address 78","wang":"xiao"}
,{"code":"025","name":"Name 10","addr":"Address 78","wang":"xiao"}
,{"code":"026","name":"Name 10","addr":"Address 78","wang":"xiao"}
,{"code":"027","name":"Name 10","addr":"Address 78","wang":"xiao"}
        ]                                                          
}                                                          
2. html 页面代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Client Side Pagination - jQuery EasyUI Demo</title>
    <style type="text/css">

#dg
        {
            border-color:red;
        }
    </style>
        <link href="../themes/icon.css" rel="stylesheet" />
    <link href="../themes/default/easyui.css" rel="stylesheet" />
    <link href="../src/demo.css" rel="stylesheet" />
    <script src="../comjs/jquery-1.8.0.min.js"></script>
    <script src="../comjs/jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Client Side Pagination</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>This sample shows how to implement client side pagination in DataGrid.</div>
    </div>
    <div style="margin:10px 0;"></div>
    
    <table id="dg" title="Client Side Pagination" style=" width:700px;height:300px" data-options="
                rownumbers:true,
                singleSelect:true,
                autoRowHeight:false,
                pagination:true,
                pageSize:10">
        <thead>
            <tr>
                <th field="code" width="80">code No</th>
                <th field="name" width="100">name</th>
                <th field="addr" width="80">addr</th>
                <th field="wang" width="80" align="right">Amount</th>

</tr>
        </thead>
    </table>
    <script>
    
        var jilu;
        var rows = [];

function getData() {
            //ajax kai
        
            $.ajax({
                url: '../datagrid_data.aspx',
                type: "get",
                async: false,

dataType: "json",
                data: 'id=' + Math.random(),
                success: function (json) {

jilu = json;
                    for (var i = 0; i < json.rows.length; i++) {
                        rows.push({ "code": json.rows[i].code, "name": json.rows[i].name, "addr": json.rows[i].addr, "wang": json.rows[i].wang });
                    }

},
                error: function (xhr, status, errorThrown) {

alert("errorThrown=" + errorThrown);
                }
            })
        
           
            return rows;
        }

function pagerFilter1(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({//1
                onSelectPage: function (pageNum, pageSize) {//2
                  
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination('refresh', {//3
                        pageNumber: pageNum,
                        pageSize: pageSize
                    });//3
                    dg.datagrid('loadData', data);
                },
                pageList:[4,10,15,20]//2
            });//1
            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 () {
          
            $('#dg').css('text-align','center');
            $('#dg').datagrid({
                loadFilter: pagerFilter1,
                width: 446,
                height:200,
                pageList: [4, 10, 15, 20],
                pageSize:4
            }).datagrid('loadData', getData());
        });
       
    </script>
</body>
</html>

就这么爽分页成功

04-18 20:20