利用EasyUI 数据网格（DataGrid）的loader属性实现后端分页

该属性在easyui官方文档中并没有详细阐述，通过简单的资料查询和摸索，实现了easyUI数据网格的后端分页功能。

在官网文档中这样阐述loader属性：

定义如何从远程服务器加载数据。返回false则取消该动作。该函数有下列参数：
param：要传递到远程服务器的参数对象。
success（data）：当检索数据成功时调用的回调函数。
error（）：当检索数据失败时调用的回调函数。

一般来说，这个loader配合着JQuery的ajax使用，即$.ajax({})。

下面记录一个使用loader属性实现分页表格 数据网格（DataGrid）的大致步骤：

一、前端页面

首先定义一个DataGrid表格，里面的columns随便在哪儿定义（官方给了两种方式，js或者html）,我这里用了js方式；

其次，loader属性需要赋值一个方法名，在下面的代码中都可以看出来；

然后，我通过打印param值，发现里面会传递两个参数（page和size），分别表示当前要显示的页，每页的数据条数，把它获取到，根据自己的具体情况封装传递到后台查询数据。

最后，在ajax请求中，success回调方法里面，将需要显示到表格中的数据通过success(data)方法传递一下就可以了；

需要强调的是返回的数据格式，至少包含total和rows属性。可以看我后面贴的格式参考。

<div>
    <table id="dg" class="easyui-datagrid" style="width:100%;height:525px" data-options="fitColumns:true,singleSelect:true">
    </table>

    <script type="text/javascript">
        var myloader = function(param, success, error) {
            var obj = {}; //声明一个对象
            obj.id = 10001; //后端要求每次请求传入一个ID
            obj.page = param.page;
            obj.size = param.rows;
            $.ajax({
                type: "post",
                url: "http://localhost:8080/home/customerService/getAllCustomerWithPage",
                async: true, //如果是在ajax方法外加载表格数据，必须【同步】方式提交
                contentType: 'application/json',
                dataType: 'JSON',
                data: JSON.stringify(obj),
                success: function(obj) {
                    console.log(obj.data)
                    success(obj.data);
                }
            });
        }

        $('#dg').datagrid({ //表格的初始化
            data: '', //初始化为空，请求成功后数据加载（这里使用ajax加载数据）
            loader: myloader,
            striped: true, //行条纹化，即奇偶行使用不同背景色
            pagination: true, //分页工具栏
            pageSize: 15, //当设置了 pagination 属性时，初始化页面尺寸。
            pageList: [15, 30, 45, 60], //当设置了 pagination 属性时，初始化页面尺寸的选择列表
            columns: [
                [{
                        field: 'cusNo',
                        title: '客户编号',
                        width: 100,
                        align: 'center'
                    },
                    {
                        field: 'cusName',
                        title: '客户名称',
                        width: 100,
                        align: 'center'
                    },
                    {
                        field: 'cusRegion',
                        title: '所属地区',
                        width: 100,
                        align: 'center'
                    },
                    {
                        field: 'cusAddr',
                        title: '客户地址',
                        width: 100,
                        align: 'center'
                    },
                    {
                        field: 'cusUrl',
                        title: '客户网址',
                        width: 100,
                        align: 'center'
                    },
                    {
                        field: 'cusLevel',
                        title: '客户级别',
                        width: 100,
                        align: 'center'
                    },
                    {
                        field: 'score',
                        title: '信用级别',
                        width: 100,
                        align: 'center'
                    }
                ]
            ]
        });
    </script>
</div>

二、数据格式

我这里贴上我的发送数据和接收到的数据格式，供大家参考。

发送格式：

我传递了三个参数，但是如果你要分页，至少得传递page和size两个参数吧，这两个参数哪儿来的，上面有说。

接收格式：

这是我定义的返回的格式，在success方法中只传递了data里面的东西（即上面js代码中的obj.data）。

{
"id":10001,
"status":200,
"desc":"查询成功",
"data":{
"total":39,
"rows":
[
{"cusId":1,
"cusNo":"90001",
"cusName":"123",
"cusRegion":"123",
"cusAddr":"重庆市",
"cusUrl":"http://www.***.edu.com",
"cusLevel":"战略合作伙伴",
"score":5}
]
}
}

sucess(data)中的data具体就是指rows和total两个属性：

参考：easyui-datagrid 的loader属性用法