EasyUI + JQuary + datagride 表格的真实分页与假分页

先明确一下两者的定义

easyui 表格中的分页给提供了两种方式

• 假分页 :datagride在请求数据时将所有的数据一次请求过来,只是在前端进行展示时给人一种虚假的分页功能展示,外观看起来没有区别这种情形只是针对于数据量较小时使用,数据量大时还是推荐使用真分页
• 真分页:前后端都进行了分页,也就是分页请求数据,在请求时只请求当页的N行数据,点击下一页时再重新请求第二页的数据

这里先上真实分页的代码,废话不多说了~

1.Html 页面展示表格书写

1. data-options中是表格的初始化选项的给定,
2. pageSize:20在这里是表格默认的每个页面中要显示多少行数据

3. fit:true,是让表格填满整个的页面,适用于内联样式表中

<table id="quaryDg" class="easyui-datagrid" style=""
       data-options="pagination:true,
                         pageSize:20,
                         fitColumns:true,
                         checkOnSelect:false,
                         fit:true,
                          singleSelect:true,
                         striped:true,
                         rownumbers:true,
                         collapsible:false,
                         toolbar:'#tb',
                         ">
        <thead>
        <tr>
            <!--        <th data-options="field:'dep1',checkbox:true"></th>-->
            <th data-options="field:'',100,align:'left',align:'left', halign:'center'">第一列</th>
            <th data-options="field:'',120,align:'right', halign:'center'">第二列</th>
            <th data-options="field:'me',100,align:'left', halign:'center'">第一列</th>
            <th data-options="field:'',160,align:'left', halign:'center'">第一列</th>
            <th data-options="field:'',120,align:'right', halign:'center'">第一列</th>
            <th data-options="field:'',110,align:'right', halign:'center'">第一列</th>
            <th data-options="field:'',120,align:'left', halign:'center'">第一列</th>
            <th data-options="field:'',120,align:'left', halign:'center'">第一列</th>
            <th data-options="field:'',120,align:'left', halign:'center'">第一列</th>
<tr>
        </thead>
    </table>

2.接下来看重头戏,表格的真实分页加载及数据解析

function loadData(value) {
    $("#quaryDg").datagrid({
            loader: function (param, success, error) {
                var pageNumber = param.page;
                var pageSize = param.rows;
                var url = "http://www.baidu.com";
                var param1 = {
                    pageNo: pageNumber,
                    pageSize: pageSize,
                    key: value,
                   //等其他请求参数
                };
                //查询需要载入的数据
                $.ajax({
                    url: url,
                    type: "POST",
                    async: false,
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify(param1),
                    dataType: "JSON",
                    timeout: 20000,
                    success: function (data) {
                   
                        var myData = data.data;
                        if (myData != null) {
                            reLodadDateGrid(myData);//解析数据到表格中
                        } else {
                            $('#quaryDg').datagrid('loadData', {total: 0, rows: []});

                        }
                        $("#quaryDg").datagrid("loaded");
                    },
                    error: function (data) {

                    }
                });

            },
            onClickCell: function (index, field, value) {
                var row = $('#quaryDg').datagrid('getRows')[index];//获取单元格所在行的所有的值
...
            }


        }
    )
}

对的,你没看错,上面就是用到的datagride中的两个参数方法实现的

  $("#quaryDg").datagrid({
            loader: function (param, success, error) {},
            onClickCell: function (index, field, value) {})
其中loader方法是联网加载datagride数据使用,onClickCell是表格的单元格点击事件,这个是额外的功能了~
现在只是联网把数据请求出来了,是一堆的json串数据,那么我们怎么才进行解析呢?其实很简单了,接着看~

function reLodadDateGrid(myData) {
    var data = myData.list;
    var values = [];
    for (var i = 0; i < data.length; i++) {
        var a = {
            'sqfName': data[i].sqfName,
            'amountIncluding': data[i].amountIncluding,
            'isEgis': data[i].isEgis,
            'taxPaymentStatus': data[i].taxPaymentStatus,
            'isIssued': data[i].isIssued,
            'flowId': data[i].flowId,
            'invoiceTypeId': data[i].invoiceTypeId,
            'lssuingMethod': data[i].lssuingMethod
        };
        values.push(a);
    }
    $('#quaryDg').datagrid('loadData', {total: myData.total, rows: values});
}

上面的数据解析,前面的字段要和html中field属性值对应,也就是列的值,在这里相当于把表格数据从新进行了封装,各个列的顺序可以不一样但是键值对要一对一,也就是你要在每列的数据与每一列保持一致

 说了上面这么多,肯定有人会说,说好的datagride真分页呢?怎么给我讲起了数据解析,别急

其实代码中已经做好了分页的处理~

1. 在loader方法请求时,我使用了下面两个param值,这个是datagride自动帮我们获取的当前页码和每一个页面的行数,我们只要把她作为请求参数传递给后台,让后台的小哥哥处理后只给我们这些数据就行了~后台分页也有的对应的框架~
   

    var pageNumber = param.page;
                   var pageSize = param.rows;

2. 像上面配置了之后,你会发现,表格下面的总数和页码都不能点击下一页,总数也不对~别急是因为你需要告诉datagride总的数据有多少,不能说请求10条数据就是10条了,而是我有100条,只是请求了10条展示了,点击下一页时才能请求其他的啊

3. $('#quaryDg').datagrid('loadData', {total: myData.total, rows: values});

4. 就是这个,数据解析时,告诉总数total: myData.total,json数据串中肯定要告诉我们总数有多少的,不然鬼知道总数据有多少啊~其中后面的才是我们封装好的对应的数据这样就能完美解析了
   
5. easyui的真实分页根本不需要我们手动处理,别想的那么复杂了,看了那么多博客真的走了不少误区~

---

一条完美的分割线

下面就是假分页,确实很简单,easyui 给的Demo里copy过来就能用,就是在数据解析时给一个数据分页过滤器即可

请参考官网

        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;
        }
        
        $(function(){
            $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
        });

分页过滤器代码来源:http://www.jeasyui.net/demo/502.html