同步表格异步表格
<%@ 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 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 pattern="yyyy-MM-dd HH:mm:ss"/></td> </tr> </c:forEach> </table> <br> <table id="ajaxTable" 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 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>