JQery easyUI datagrid服务端分页

datagrid分页 有一个附加的分页控件，只需后台获取分页控件自动提交的两个参数rows(每页显示的记录数)和page(当前第几页)

然后返回json: rows(所需数据list)和total(总记录数)  界面如下：

1、下边是datagrid的显示对话框，我直接用table把列头显示出来，感觉比用js写要易于阅读

<table id= "list_data" cellspacing= "0" cellpadding= "0" > <thead> <tr> <th field= "fldAppDept" width= "100" >部门</th> <th field= "fldAppNode" width= "100" >网站</th> <th field= "fldAppName" width= "100" >名称</th> <th field= "fldAppMgr" width= "100" >管理员</th> <th field= "fldAppNote" width= "100" >注释</th> <th field= "fldAppType" width= "100" >类型</th> <th field= "fldTelphone" width= "100" >电话</th> <th field= "fldAppImg" width= "100" >职务</th> <th field= "fldAppMonitor" width= "100" >启用监测</th> <th field= "fldAppLevel" width= "100" >要重级别</th> </tr> </thead> </table>

2、js代码，用于构建datagrid

注意 要想显示分页控件，pagination属性必须为true

//datagrid初始化        $( '#list_data' ).datagrid({            title: '应用系统列表' ,            iconCls: 'icon-edit' , //图标            width: 700,            height:  'auto' ,            nowrap:  false ,            striped:  true ,            border:  true ,            collapsible: false , //是否可折叠的            fit:  true , //自动大小            url: 'listApp.action' ,            //sortName: 'code',            //sortOrder: 'desc',            remoteSort: false ,             idField: 'fldId' ,            singleSelect: false , //是否单选            pagination: true , //分页控件            rownumbers: true , //行号            frozenColumns:[[                {field: 'ck' ,checkbox: true }            ]],            toolbar: [{                text:  '添加' ,                iconCls:  'icon-add' ,                handler:  function () {                    openDialog( "add_dialog" , "add" );                }            },  '-' , {                text:  '修改' ,                iconCls:  'icon-edit' ,                handler:  function () {                    openDialog( "add_dialog" , "edit" );                }            },  '-' ,{                text:  '删除' ,                iconCls:  'icon-remove' ,                handler:  function (){                    delAppInfo();                }            }],        });        //设置分页控件        var  p = $( '#list_data' ).datagrid( 'getPager' );        $(p).pagination({            pageSize: 10, //每页显示的记录条数，默认为10            pageList: [5,10,15], //可以设置每页记录条数的列表            beforePageText:  '第' , //页数文本框前显示的汉字            afterPageText:  '页    共 {pages} 页' ,            displayMsg:  '当前显示 {from} - {to} 条记录   共 {total} 条记录' ,            /*onBeforeRefresh:function(){               $(this).pagination('loading');               alert('before refresh');               $(this).pagination('loaded');           }*/        });

3、后台使用mvc返回json

  public JsonResult GetList(int? page, int? rows)

        {

            List<Guestbook> list = bll.GetPageGuestbooks(q => true, rows, page).ToList();

          var vv=new { 

          total=bll.GetAllGuestbooks().Count,

          rows=list

          };

            return Json(vv, JsonRequestBehavior.AllowGet);

        }