使用Ajax动态添加表格获得后台数据翻页异步刷新（struts2下）

本文链接：https://blog.csdn.net/i9577/article/details/50948894

用Ajax生成表格不能使用Jquery动作，只能用js，因为没法获得id 和name属性
如果有三层字符串双单引号嵌套的话可以用转义符‘’\‘’
一开始在js中[注解Mark问题处]一开始在append的处没有结束的它会自动的给你添加上，就会导致样式重新排版错误。太傻了不知道转换一下思路，先把开始和结束标签写出来然后加上一个id，最后再在这个标签里面加上append就不会出错了。。。
自己以后多灵活一点不要在这种问题上浪费时间。。。

js的代码


    $(function(){
        page(1);
        $("[name = page]").click(function(){
            alert('123');
        }); 
    });

        function page(num){

            /*var index = $(this).attr("name"); 
            alert(index);*/
            var index = num;
            $.ajax({
                type:"post",
                url:"loginLogListSystemInitial.action",
                dateType:"json",
                data:{"statePage":index},
                success:function(data){
                    var logPage=eval("(" + eval(data) + ")");
                    var arr=logPage.logList;
                    var page=logPage.page;
                $("#logList").html("");
                    if(data != []){
                    var logPage=eval("(" + eval(data) + ")");
                    $("#logList").append("<tr bgcolor='#CCCCCC'>" +
                            "<th width='60' align='left'><input id='chk_SelectALL' name='ids' type='checkbox' />全选</th>" +
                            "<th width='30' align='left'>编号</th>" +
                            "<th width='93' align='left'>登陆用户</th>" +
                            "<th width='86' align='left'>登陆时间</th>" +
                            "<th width='96' align='left'>登陆描述</th>" +
                            "<th width='112' align='left'>IP地址</th>" +
                            "<th width='150' align='left'>操作</th>" +
                            "</tr>");
                    $.each(arr,function(i,log){
                    $("#logList").append("<tr><td><input name='selectSub' type='checkbox' value="+log.id+" /></td>" +
                            "<td>"+log.id+"</td>" +
                            "<td>"+log.username+"</td>" +
                            "<td>"+log.time+"</td>" +
                            "<td>"+log.desc+"</td>" +
                            "<td>"+log.userIp+"</td>" +
                        "<td>"+
                            "<c:forEach var='f' items='${userRoles}'>"+
                                "<c:if test='${f.id == 1}'>"+
                                    "<a href='log_lookSystemInitial.action?stateLog=1&entityId="+log.id+"' class='more'>查看</a>&nbsp;"+
                                "</c:if>"+
                                "<c:if test='${f.id == 82}'>"+
                                    "<a href='javascript:if(confirm(\"确定要删除吗?\")){location = \"delLoginLog.action?entityId="+log.id+"\";}' class='more'>删除</a>"+
                                "</c:if>"+
                            "</c:forEach>"+
                        "</td></tr>");
                    });
                    $("#logList").append("<tr><td id='pageMark' colspan='7' align='right'  height='40px'></td></tr>");
                    $("#pageMark").append(
                            "<c:forEach var='f' items='${userRoles}'>" +
                            "<c:if test='${f.id == 82}'>" +
                            "&nbsp;<a href='javascript:if(confirm(\"确定要删除吗?\")){location = \"delLoginLog.action?entityId\";}' class='more float_l'>删除选中</a>" +
                            "</c:if>" +
                            "</c:forEach>"
                    );
                    if(page.currentPage-1 > 0){
                    $("#pageMark").append(
                            "<a name='page' href='javascript:void(0);' onClick='page(1)' class='more'>首页</a>" +
                            "&nbsp;<a name='page' href='javascript:void(0);' onClick='page("+(page.currentPage-1)+")' class='more'>上一页</a>" 
                    );};
                    $("#pageMark").append("&nbsp;【"+page.currentPage+"/"+page.totalPage+"】&nbsp;");
                    if(page.totalPage > page.currentPage){
                    $("#pageMark").append("<a name='page' href='javascript:void(0);' onClick='page("+(page.currentPage+1)+")' class='more'>下一页</a>" +
                            "&nbsp;<a name='page' href='javascript:void(0);' onClick='page("+page.totalPage+")'  class='more'>末页</a>"
                            );
                    };
                    /*$("logList").append("</td></tr>");*/
                    };
                    },
                error:function(){
                    $("#logList").html("");
                    $("#logList").append("<tr bgcolor='#CCCCCC'>" +
                            "<th width='60' align='left'><input id='chk_SelectALL' name='ids' type='checkbox' />全选</th>" +
                            "<th width='30' align='left'>编号</th>" +
                            "<th width='93' align='left'>登陆用户</th>" +
                            "<th width='86' align='left'>登陆时间</th>" +
                            "<th width='96' align='left'>登陆描述</th>" +
                            "<th width='112' align='left'>IP地址</th>" +
                            "<th width='150' align='left'>操作</th>" +
                            "</tr>");
                    $("#logList").append("<p style='color:red;font-size=20px;'>没有该记录！<P>");
                }
            });
        }

jsp的部分代码

<script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/loginLog_9577.js"></script>
 <h5><strong>登陆日志列表</strong></h5>

                    <table id="logList" width="700px" cellspacing="0" cellpadding="5">

                    </table>

struts2.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
    "http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
    <package name="system"  extends="json-default" namespace="/">
        <action name="*SystemInitial" class="com.onemax.oa.action.init.SystemMgrInitial" method="{1}">
                <result>/OA/xtmgr/log_login.jsp</result>
                <result name="{1}" type="json">
                    <param name="root">logJson</param>
                </result>
        </action>
    </package>


</struts>

Action的代码

package com.onemax.oa.action.init;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import com.onemax.oa.action.ActionBase;
import com.onemax.oa.entity.LoginLog;
import com.onemax.oa.entity.UserInfo;
import com.onemax.oa.entity.extend.PageSource;
import com.onemax.oa.entity.extend.SearchCondition;
import com.opensymphony.xwork2.ActionContext;


/**
 * Action_Initial_系统管理模块
 * 
 * @author 9577
 *
 */  
@SuppressWarnings("serial")
public class SystemMgrInitial extends ActionBase {
    private String logJson;     //Ajax实现异步翻页
    private PageSource page; //分页对象
    private SearchCondition search;     //搜索条件
    private List<LoginLog> loginLogList;    //登录日志集合

    public String getLogJson() {
        return logJson;
    }

    public void setLogJson(String logJson) {
        this.logJson = logJson;
    }

    public SearchCondition getSearch() {
        return search;
    }

    public void setSearch(SearchCondition search) {
        this.search = search;
    }

    public List<LoginLog> getLoginLogList() {
        return loginLogList;
    }

    public void setLoginLogList(List<LoginLog> loginLogList) {
        this.loginLogList = loginLogList;
    }

    public PageSource getPage() {
        return page;
    }

    public void setPage(PageSource page) {
        this.page = page;
    }
    /**
     *只是一个跳转方法
     */
    public String loginLogLoad(){
        return SUCCESS;
    }
    /**
     * 动态显示所有的登录日志数据
     */
    public String loginLogList(){

        //第一次加载，防止null
        if (page == null) {
            page = new PageSource();
            }
        if(super.getStatePage()==null){
            super.setStatePage(1);
        }
        if(search == null){
            search = new SearchCondition();
        }
        //获取当前用户的信息
        UserInfo user=(UserInfo) ActionContext.getContext().getSession().get("loginUser");
        search.setUserId(user.getId());
        search.setUserRoleId(user.getRoleInfo().getId());
        //设置当前页
        page.setCurrentPage(super.getStatePage());
        //设置每页条数
        page.setEachNum(8);
        //按条件获得所有数据
        loginLogList=super.loginLogMgr.findAll(search,page.getCurrentPage(),page.getEachNum());
        //获得总记录数
        page.setTotalNum(super.loginLogMgr.findAll(search,0,0).size());
        //判断集合是否为空
        if(loginLogList !=null){
            JSONArray jsonArray= new JSONArray();
            JSONObject page = JSONObject.fromObject(this.page);
            for (LoginLog obj : loginLogList) {
                JSONObject log = new JSONObject();
                log.put("id",obj.getId());
                log.put("username",obj.getUserInfo().getName());
                log.put("desc",obj.getDesc());
                log.put("time",obj.getTime());
                log.put("userIp",obj.getUserip());
                jsonArray.add(log);
            }
            Map<String,Object> map = new HashMap<String,Object>();
               map.put("page",page);
               map.put("logList",jsonArray);
               logJson = JSONObject.fromObject(map).toString();
               System.out.println(logJson);
        }
        return "loginLogList";
    }

}