EasyUI + Struts2 + Ajax 显示 easyui datagrid 分页效果

1、Html代码

     <script type="text/javascript" src="/js/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/js/easyui/easyui-lang-zh_CN.js"></script>
    <link href="/js/easyui/themes/default/easyui.css" type="text/css" rel="stylesheet">
    <link href="/js/easyui/themes/icon.css" type="text/css" rel="stylesheet">
    <link href="/js/easyui/themes/self.css" type="text/css" rel="stylesheet">


<script type="text/javascript">  
    
    //页面加载时调用
    $(function(){
        query();
        
    })
    
    
    //查询表格信息
    function query(){
        $('#table_data').datagrid({   
        title:'数据表信息列表',   
        iconCls:'icon-edit',//图标   
        'auto',
        height:'auto',   
        nowrap: false,   
        striped: true,   
        border: true,   
        collapsible:false,//是否可折叠的   
        fit: true,//自动大小   
        url:'app/MetaQuery!metaQuery.action?tName='+$('#tName').val()+"&tCode="+$('#tCode').val()+"&tKind="+$('#tKind').val(),   
        //sortName: 'code',   
        //sortOrder: 'desc',   
        remoteSort:false,    
        idField:'tableID',   //单选框id
        singleSelect:true,//是否单选   
        pagination:true,//分页控件   
        rownumbers:true,//行号   
        frozenColumns:[[   
            {field:'ck',checkbox:true}   
        ]],   
        onSelect: function(rowIndex, rowData){//绑定点击一行触发事件
                queryField(rowData.tableID);//元字段列表刷新
            }
        });   
        //设置分页控件   
        var p = $('#table_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');  
            }*/  
        }); 
    
    }
    
    
    //新增数据库表格
    function addMeta(){
        var height = "400px";
        var url = "system/JumpMetaAddOrUpdate!jumpMetaAddOrUpdate.action";
        $('#w').window({title:'新增数据表信息',
                        '580px',
                        height:height,
                       content:'<iframe scrolling=auto frameborder=0  src='+url+' style=100%;height:100%;></iframe>'})
               .window('open').window('center');
    }
    
    
    //修改数据库表格
    function updateMeta(){
        var row = $('#table_data').datagrid('getSelected');
        if(!row){
            $.messager.alert('提示', "请选择一条数据信息", 'info');
            return;
        }
        var url = "system/JumpMetaAddOrUpdate!jumpMetaAddOrUpdate.action?tableID="+row.tableID;//修改数据源访问请求
        var height = "400px";
        $('#w').window({title:'修改数据表信息',
                        '580px',
                        height:height,
                       content:'<iframe scrolling=auto frameborder=0  src='+url+' style=100%;height:100%;></iframe>'})
               .window('open').window('center');
    }
    
    
    //删除数据库表格
    function deleteMeta(){
        var row = $('#table_data').datagrid('getSelected');
        if(!row){
            $.messager.alert('提示', "请选择一条数据信息", 'info');
            return;
        }
        $.messager.confirm('提示', "确认删除？", function(r){
            if (r){
                    $.ajax({
                        type : "POST",
                        contentType : "application/x-www-form-urlencoded;charset=gbk",
                        url : "app/MetaDelete!metaDelete.action?tableID="+row.tableID,
                        dataType : "json",
                        success : function(data){
                            if(data.result == "success"){
                                var index = $('#table_data').datagrid('getRowIndex',row);
                                $('#table_data').datagrid('deleteRow',index);
                                query();//元字段列表刷新
                                //loadDataFieldgrid(rowData.sourceID);//数据源字段列表刷新
                            }else{
                                $.messager.alert('提示', "删除失败", 'error');
                            }
                        },
                        error : function(){
                            $.messager.alert('提示', "删除失败", 'error');
                        }
                    });
                }
        });
    }
    
    
    
    
    
    
    </script> 



 <div  style="float:left;  40%;height: 80%;" >
      
        <div id="searchtool" >
            <span>表名:</span><input type="text" id="tName" name="tName" size="15">    
            <span>表代码:</span><input type="text" id="tCode" name="tCode" size="10">
            <span>类别:</span><select class="selectCss" id="tKind" name="tKind">
                                <option value="0" ></option>
                                <s:iterator value="#session.dicVO"  var="str">
                                <option value="<s:property value="#str.code"/>" ><s:property value="#str.name"/></option>
                                </s:iterator>
                              </select>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'"   onclick="query()" >查询</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'"      onclick="addMeta()" >添加</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit'"     onclick="updateMeta()" >修改</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove'"   onclick="deleteMeta()" >删除</a>
        </div>
      
      
        <table id="table_data" class="easyui-datagrid" style="600px;height=500px"
           rownumbers="true" toolbar="#searchtool" loadMsg="正在查询...">   
            <thead>   
                <tr>   
                    <th field="tableName"     width="20%">表名</th>   
                    <th field="tableCode"     width="20%">表代码</th>   
                    <th field="dbOwner"       width="20%">权限</th>   
                    <th field="kindStr"       width="20%">类别</th>   
                    <th field="statusStr"     width="13%">状态</th>   
                </tr>   
            </thead>   
        </table> 
        
     </div>

---

2、Struts2配置文件

<package name="app" extends="json-default" namespace="/app">   
        <!-- 查询数据库表格信息 -->
        <action name="MetaQuery" class="com.netcom.nkestate.system.action.MetaDataAction" >   
            <result type="json">   
                <param name="root">result</param>   
            </result>   
        </action>
    </package>

3、Action类

public class MetaDataAction extends ActionSupport implements ServletRequestAware ,SessionAware{
    private String rows;//每页显示的记录数   
    private String page;//当前第几页   
    private Map<String , Object> session;
    private Map<String , Object> responseJson;
    private JSONObject result;//返回的json   
    
    private MetaTableBO bo = new MetaTableBOImp();


    /**
     * 功能描述：查询数据库表格信息
     */
    public String metaQuery() {   
         HttpServletRequest request = ServletActionContext.getRequest();
         String tableName = request.getParameter("tName");
         String tableCode = request.getParameter("tCode");
         String kind = request.getParameter("tKind")==null?"0":request.getParameter("tKind");
             Page p = new Page();
             p.setCurrentPage(Integer.parseInt(page));//当前页
             p.setPageSize(Integer.parseInt(rows));//每页最大数
             List<MetaTableVO> list;
             try{
                  Map<String, Object> jsonMap = new HashMap<String, Object>();//定义map   
             list = bo.findMetaTable(tableName,tableCode, Integer.parseInt(kind), p);
                    jsonMap.put("total", bo.findMetaTableCount(tableName,tableCode, Integer.parseInt(kind)));//total键 存放总记录数，必须的   
                     jsonMap.put("rows",  list);//rows键 存放每页记录 list   
                  result = JSONObject.fromObject(jsonMap);//格式化result   一定要是JSONObject   
         }catch (Exception e){
             e.printStackTrace();
         }
         return SUCCESS; 
    }

}

---

---

4、显示结果

---