同步表格异步表格

wentao365

浏览: 1413108 次
性别:
来自: 北京

最近访客更多访客>>

有你不孤单

wuzijingaip

wmzhsqy

ssydxa219

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

网站前台

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>作者列表</title>
    <link href="${pageContext.request.contextPath}/css/table.css" rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath}/css/jquery.loadmask.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery.cookie.js"></script>
    <script language="javascript" src="${pageContext.request.contextPath}/js/com.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.loadmask.js"></script>
</head>
<body>
    <br>
    <table class="tableList" cellpadding="0" cellspacing="1" align="center">
        <caption>
            作者列表
            <span style="float:right;color:#FF0000;">说明：同步方式加载 </span>
        </caption>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>简介</th>
            <th>类型</th>
            <th>keyword</th>
            <th>description</th>
            <th>创建时间</th>
        </tr>
        <c:forEach var="item" items="${list}" varStatus="status">
            <tr>
                <td class="col_id">${item.id}</td>
                <td>${item.name}</td>
                <td>${item.brief}</td>
                <td>${item.type}</td>
                <td>${item.keyWord}</td>
                <td>${item.description}</td>
                <td class="col_time"><fmt:formatDate value="${item.timeCreate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
            </tr>
        </c:forEach>
    </table>

    <br>
    <table id="ajaxTable" class="tableList" cellpadding="0" cellspacing="1" align="center">
        <caption>
            作者列表
            <span style="float:right;color:#FF0000;">说明：异步方式加载 </span>
        </caption>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>简介</th>
            <th>类型</th>
            <th>keyword</th>
            <th>description</th>
            <th>创建时间</th>
        </tr>
        <c:forEach var="item" items="${list}" varStatus="status">
            <tr>
                <td class="col_id">${item.id}</td>
                <td>${item.name}</td>
                <td>${item.brief}</td>
                <td>${item.type}</td>
                <td>${item.keyWord}</td>
                <td>${item.description}</td>
                <td class="col_time"><fmt:formatDate value="${item.timeCreate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
            </tr>
        </c:forEach>
    </table>
<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
                    url : "/bms/bauthor_list_ajax.tbao" ,
                    type : "post",
                    data : {
                        prodId : 0
                    },
                    beforeSend : function() {
                        $('#ajaxTable').mask("正在提交数据，请稍候。");
                    },
                    success : function(responseObj, statusText, xhr) {
                        var tableObj = document.getElementById('ajaxTable');
                        //清除表格中原有数据
                        var rowLength = tableObj.rows.length;
                        for (var i = 1; i < rowLength; i++) {
                            tableObj.deleteRow(1);
                        }
                        //添加新的数据
                        for (var i = 0; i < responseObj.length; i++) {
                            var rowData = responseObj[i];
                            var newRow = tableObj.insertRow(tableObj.rows.length);
                            var cell_0 = newRow.insertCell(0);
                            var cell_1 = newRow.insertCell(1);
                            var cell_2 = newRow.insertCell(2);
                            var cell_3 = newRow.insertCell(3);
                            var cell_4 = newRow.insertCell(4);
                            var cell_5 = newRow.insertCell(5);
                            var cell_6 = newRow.insertCell(6);
                            cell_0.innerHTML = rowData["id"];
                            cell_1.innerHTML = rowData["name"];
                            cell_2.innerHTML = rowData["brief"];
                            cell_3.innerHTML = rowData["type"] ? rowData["type"] : '';
                            cell_4.innerHTML = rowData["keyWord"] ? rowData["keyWord"] : '';
                            cell_5.innerHTML = rowData["description"] ? rowData["description"] : '';
                            cell_6.innerHTML = rowData["timeCreate"];
                        }

                        $(".tableList tr:odd").css("background-color", "#F2F9FF");
                        $(".tableList tr:even").css("background-color", "#E8F2FA");
                        $('#ajaxTable').unmask();
                    }
                });
    });
</script>

</body>
</html>

查看图片附件

分享到：

mybatis 备忘 | 最新版本

2012-09-13 13:05
浏览 1108
评论(0)
分类:移动开发
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

同步表格异步表格

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

同步表格异步表格

评论

发表评论

相关推荐

jquery tab切换

jquery 与 css相关

table 合并行合并列

js 5秒之内禁止重复提交代码

点按钮连接到新界面

开源编辑器

子窗口向父窗口传值

“回到顶端”按钮实现

用jquery实现输入框消失文字

http 错误代码表

美化alert

文本框只能输入数字

li float left

js 保留2位小数

控制文本框只能输入数字

jquery ajax 提交表单大数据

js 刷新界面

前台面试题

javascript 闭包

Dreamweaver使用技巧

最近访客更多访客>>