easyui分页

分页往往是依附于数据表格的，所以我们就使用的是easyui的datagrid组件，来开启pagination分页组件，为了方便，我们使用js实现。

       表格显示初始化

[html] view plain copy print?

    <table id="dg"></table>  

    <script>  
        $('#dg').datagrid({  
            title: '学生信息查询结果',       //表格标题  
            width:500,            //表格宽度  
            pagination: true,     //开启分页  
            pageSize: 10,         //分页大小  
            pageNumber:1,         //第几页显示（默认第一页，可以省略）  
            pageList: [10, 20, 30], //设置每页记录条数的列表   
            //url: '/FreshStudentMaintain/test',  //获取数据地址  
            columns: [[                //添加列  
                {  
                    field: 'OrganizationID',  //绑定数据源ID  
                    title: '专业代码',        //显示列名称  
                },  
                {  
                    field: 'OrganizationName',  
                    title: '专业名称',  
                },  
            ]],  
        });  
    </script>  

 

我们还可以手动设置分页控件的显示样式，例如：

    var p = $('#dg').datagrid('getPager');  
    $(p).pagination({  
        beforePageText: '第',//页数文本框前显示的汉字   
        afterPageText: '页    共 {pages} 页',  
        displayMsg: '第{from}到{to}条，共{total}条',  
    });  

 

原版显示效果如下：

     
如上图所示，数据表格和分页已经显示出来了。

       假分页实现

假分页就是将所有要显示的数据全部查询出来后，进行前台的分页，适合数据量较小的Web项目。

实现代码：

 

    <script>         
        $('#dg').datagrid({ loadFilter: pagerFilter }).datagrid({  
                url: '/FreshStudentMaintain/test'     //加载数据  
            });  
      
    // 分页数据的操作  
        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;  
        }  
    </script>  

 

后台代码仅仅是将从数据库里查询到的数据转化未Json字符串类型传到前台就可以了。例：

    public ActionResult test()  
            {  
                IBasicOrganizationBll CollegeBll = SpringHelper.GetObject<IBasicOrganizationBll>("BasicOrganizationBll");  
                List<OrganizationViewModel> college = CollegeBll.QueryCollege();//查询后台数据方法  
      
                return Json(college, JsonRequestBehavior.AllowGet);  
      
            }  

 

显示效果：

       真分页

真分页相对假分页来说麻烦了一些，但是对于数据量大的系统来说，可以很好的，快速的查询数据。要想实现分页，我们就得先知道分页的原理，首先我们需要将[第几页](pageIndex)和[一页多少数据](pageSize)传递给后台，以便查询，EasyUI非常方便的给我们提供了自动将这两个参数传到后台的事件，当我们刚开始加载数据的时候，我们可以看到如图，

当我选择每页显示10条数据的时候。

当我点击下一页的时候，

是不是非常清楚原理了，我们现在要做的就是在后台接收这些数据，当然需要注意的是：后台需要返回总数据条数（total）以便前台显示。

    <script>  
        $('#dg').datagrid({  
            title: '学生信息查询结果',       //表格标题  
            width:500,            //表格宽度  
            pagination: true,     //开启分页  
            pageSize: 10,         //分页大小  
            pageNumber:1,         //第几页显示（默认第一页，可以省略）  
            pageList: [10, 20, 30], //设置每页记录条数的列表   
            url: '/FreshStudentMaintain/test',  //获取数据地址  
            columns: [[                //添加列  
                {  
                    field: 'OrganizationID',  //绑定数据源ID  
                    title: '专业代码',        //显示列名称  
                },  
                {  
                    field: 'OrganizationName',  
                    title: '专业名称',  
                },  
            ]],  
        });  
    </script>  

 

后台代码接收：

@RequestMapping(value="/getEmpByPage.do")
    @ResponseBody
    public Map<String,Object> getEmpByPage(HttpServletRequest request,Model model){
        
        String page=request.getParameter("page");
        String rows=request.getParameter("rows");
    
        //显示的具体数据
        List<Emp> emps=empservice.getEmpByPage(Integer.parseInt(page), Integer.parseInt(rows));
        int total=empservice.getEmpCount();//总条数
        
        //服务器分页必须向前台提供total和rows这两个参数
        Map<String,Object> objs=new HashMap<String,Object>();
        objs.put("total", total);
        objs.put("rows",emps);
        
        return objs;
    }

 

接口代码：

List<OrganizationViewModel> test(int pageIndex, int pageSize, out int total);

查数据代码（我这里使用的封装好的D层，仅供参考，具体查询方法，请自己书写SQL语句）：

 

至此真分页就已经实现了（其实也没什么东西，但是刚开始接触，不怎么会用而已）。

    public List<OrganizationViewModel> test(int pageIndex, int pageSize,out int total)  
             {  
                 List<basicorganizationentities> major = new List<basicorganizationentities>();  
      
                 major = this.BasicOrganizationCurrentDal.LoadPageItems(pageSize, pageIndex, out total, u => u.OrganizationCode, true).ToList();  //分页数据查询  
      
                 return ConvertListToList<List<basicorganizationentities>, List<OrganizationViewModel>>.ListInputToOutput<basicorganizationentities, OrganizationViewModel>(major); //返回查询到的泛型集合。  
             }