关闭

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

标签: Ajax
1752人阅读 评论(0) 收藏 举报
分类:

用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";
    }

}
1
0
查看评论

jquery datatable 异步刷新

xxxTable.ajax.reload();参考文档: http://datatables.club/reference/api/ajax.reload().html
  • ISaiSai
  • ISaiSai
  • 2016-10-08 10:58
  • 1749

Ajax对表格中的信息不刷新页面进行更新数据

html: Title 1111 2222 ...
  • Grit_ICPC
  • Grit_ICPC
  • 2016-11-05 17:18
  • 3187

ajax异步获取数据后动态向表格中添加数据(行)

ajax js 动态添加数据 table
  • love254443233
  • love254443233
  • 2015-09-15 15:38
  • 27205

Struts2从后台传集合list给下拉菜单,动态获取

Struts2从后台传集合list给下拉菜单,动态获取
  • a951861496
  • a951861496
  • 2016-10-25 15:41
  • 1563

使用Ajax实现页面表格添删改查的异步刷新操作

  • 2017-10-20 16:39
  • 9.29MB
  • 下载

关于ajax异步请求后台数据进行动态分页

ajax请求后台拿到json类型的数据后,可以在它的success回调方法中进行动态分页,也就是表格重绘,此时,我们需要得到的数据包括:查询得到的数据、数据总条数、总页数、当前页数,其中前三条可在后台获取,对于当前页数,需要从前端获取点击页数再通过请求传递给后台,后台做完相应处理后再传回给前端。 ...
  • u010131415
  • u010131415
  • 2015-07-28 09:42
  • 3912

ajax异步问题导致的刷新页面数据不更新

ajax的async默认的设置值为true,这种情况为异步方式,就是说当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success,也就是说这时候执行的是两个线程。 ajax用它就是因为它的异步性,平时也都...
  • Amo_te_ama_me
  • Amo_te_ama_me
  • 2016-04-20 11:14
  • 14658

jQuery清空table表格除首行外的所有数据(ajax+ js实现动态画表及刷新数据)

其中tb是table的id。$(“#tb tr:not(:first)”).html(“”); 或者是 $(“#tb tr:not(:first)”).empty(“”);jQuery清空table表格除首行外的所有数据实例: ajax+ js实现动态画表及刷新数据<%@ Page L...
  • lz37025
  • lz37025
  • 2017-04-22 15:39
  • 3255

bootstrap jquery dataTable 异步ajax刷新表格数据

异步请求 var postData = { "env_name" : new_env_name, "env_url": new_env_url, ...
  • a23764996
  • a23764996
  • 2017-02-10 14:57
  • 7717

使用AJAX动态生成table表格数据和jquery.pagination.js 的分页栏

  • 2017-06-18 15:53
  • 45KB
  • 下载
    个人资料
    • 访问:10181次
    • 积分:327
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:12篇
    • 译文:0篇
    • 评论:0条