EasyUI datagrid分页查询

var p = $('#mainTable').datagrid('getPager');
        if (p){
            $(p).pagination({
                onSelectPage:function(pageNumber, pageSize){
                    param = $.extend(param,{page:pageNumber,rows:pageSize});//这步需要把分页参数传给后台做分页查询
                    $(this).pagination('loading');
                    loadData(param);//重载数据将datagrid填充。
                    $(this).pagination('loaded');
                },
                onBeforeRefresh:function(pageNumber,pageSize){
                    $(this).pagination('loading');
                    //progress bar
                },
                onRefresh:function(){
                    $(this).pagination('loaded');
                }
            });
        }

easyUI 的前端分页还是挺完善的，话说只要用一句话就可以搞定。

下面是datagrid方式的分页。先把数据加载到datagrid。。。

$.getJSON(url,function(data){
        var _peConfig = data.peIDConfig;
        var _fzConfig = data.peFZConfig;
        $("#mainTable").datagrid({
            iconCls:'icon-save',
            nowrap: false,
            striped: true,
            collapsible:true,
            pageSize: 10,//每页显示的记录条数，默认为10 
            pageList: [5,10,20],//可以设置每页记录条数的列表 
//          url:param.action+'?id='+param.id+'&t='+Math.random(),
            onDblClickRow:function(rowIndex, rowData){
//              var callback = eval(param.dbClick);
//              if(callback)
//              callback(rowData[_peConfig.idField]);   //添加双击事件，修改行，传入主键
                relatedData(param.action,rowData[_peConfig.idField]);       //显示详细信息，传入主键
            },
            onLoadSuccess:function(data){
//              var _parentDiv = $('.pagination-btn-separator').parent().parent().parent;
//              alert(_parentDiv.html())
//              _parentDiv.append("<td><input id=pagerSearch class='mini-textbox-input' searcher='123' prompt='请输入查询值' style='width:200px' /></td>");
//              alert(_parentDiv.parents().find("tr").html())
//              _parentDiv.parents().find("tr").append("<td><input id=pagerSearch class='mini-textbox-input' searcher='123' prompt='请输入查询值' style='width:200px' /></td>");
//              _parentDiv.parents().find("tr").append("<td><div class='pagination-btn-separator'></div></td><td>"+htm+"</td>");
            },
            loadMsg:"正在载入...",
            sortName: _peConfig.sortName,
            sortOrder: _peConfig.sortOrder,
            height:"300",
            width:"auto",
            remoteSort: false,
            idField:_peConfig.idField,
            frozenColumns:[[
                        {field:'ck',checkbox:_peConfig.checkable},
                        {title:_peConfig.title,field:_peConfig.field,hidden:true,width:"0",sortable:_peConfig.sortable},
                        {title:_fzConfig.title,field:_fzConfig.field,width:_fzConfig.width,sortable:_fzConfig.sortable}
            ]],
            columns:[[
            ]],
            pagination:true,
            rownumbers:true
        });

然后填充模版上的一写内容...

datagrid在分页按钮上自动绑定了事件，当点击下一页会触发onSelectPage函数，这时就可以对数据分页进行操作了~

var p = $('#mainTable').datagrid('getPager');
        if (p){
            $(p).pagination({
                onSelectPage:function(pageNumber, pageSize){
                    param = $.extend(param,{page:pageNumber,rows:pageSize});//
                    $(this).pagination('loading');
                    loadData(param);//充载
                    $(this).pagination('loaded');
                },
                onBeforeRefresh:function(pageNumber,pageSize){
                    $(this).pagination('loading');
                    //progress bar
                },
                onRefresh:function(){
                    $(this).pagination('loaded');
                }
            });
        }

这时会对datagrid的属性做重载，界面上的数据都会被刷新掉，那当前页，每页条数都会被刷新。这时就需要下面

$("#mainTable").datagrid('getPager').pagination({pageSize:param.rows,pageNumber:param.page});//分页关键

这样就OK。

分页完成，后台需要接收当前页和每页条数作为分页查询条件，后台上的一些分页逻辑和语句就不贴出来了。