异步分页ajax
****jsp頁面代碼
<%@ page language="java" ?? ?pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
?? ?<head>
?? ??? <link type="text/css" rel="stylesheet" href="../style/style.css" />
?? ??? ?<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
?? ??? ?<script type="text/javascript" src="../js/jquery.messager.js"></script>
?? ??? ?<script type="text/javascript" src="../js/time.js"></script>
?? ??? ?<title>代辦事宜系統</title>
?? ??? ?<script type="text/javascript">
?? ??? ?function pages(page){
?? ??? ??? ?$.ajax({url: "pages.action?page=" + page,
?? ??? ??? ??? ?dataType:'json',
?? ??? ??? ??? ?async:false,
?? ??? ??? ??? ?success:function(data){
?? ??? ??? ??? ??? ?$('#tb1').empty();
?? ??? ??? ??? ??? ?for( var i=0;i<data.length;i++){
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?$('#tb1').append(
?? ??? ??? ??? ??? ??? ?'<tr><td>' + data[i].id
?? ??? ??? ??? ??? ??? ?+ '</td><td>' + data[i].title
?? ??? ??? ??? ??? ??? ?+ '</td><td>' + data[i].remindtimes
?? ??? ??? ??? ??? ??? ?+ '</td><td>' + data[i].ji.gradename
?? ??? ??? ??? ??? ??? ?+ '</td><td>' + data[i].content
?? ??? ??? ??? ??? ??? ?+ '</td><td><a href="detail.action?id='? + data[i].id +' "? target="_blank">查看</a>'
?? ??? ??? ??? ??? ??? ?+ '<a href="toModi.action?id='? + data[i].id +' " > 修改</a>'
?? ??? ??? ??? ??? ??? ?+ '<a href="delete.action?id='? + data[i].id +' " > 刪除</a>'
?? ??? ??? ??? ??? ??? ?+ '</td></tr>');
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ?});
?? ??? ?};
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ?<div align="center" style="font-size: 30px;">列表顯示</div>
?? ?<form action="list/list.action" id="listform">
?? ?<div >
?? ??? ?<table border="1px"align="center" width="850" height="50" >
?? ??? ??? ?<thead>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td>事件ID</td>
?? ??? ??? ??? ??? ?<td>標題</td>
?? ??? ??? ??? ??? ?<td>提醒時間</td>
?? ??? ??? ??? ??? ?<td>事件級別</td>
?? ??? ??? ??? ??? ?<td>事件內容</td>
?? ??? ??? ??? ??? ?<td>查看詳情</td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ?</thead>
?? ??? ??? ?<tbody id="tb1">
?? ??? ??? ??? ?<s:iterator value="list">
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td><s:property value="id"/></td>
?? ??? ??? ??? ??? ?<td><s:property value="title"/></td>
?? ??? ??? ??? ??? ?<td><s:date name="remindtimes" /></td>
?? ??? ??? ??? ??? ?<td><s:property value="ji.getGradename()"/></td>
?? ??? ??? ??? ??? ?<td><s:property value="content"/></td>
?? ??? ??? ??? ??? ?<td><a href="detail.action?id=<s:property value="id"/>"? target="_blank">查看</a>
?? ??? ??? ??? ??? ??? ?? <a href="toModi.action?id=<s:property value="id"/>"? >修改</a>
?? ??? ??? ??? ??? ??? ?? <a href="delete.action?id=<s:property value="id"/>"? > 刪除</a>
?? ??? ??? ??? ??? ?</td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?</s:iterator>
?? ??? ??? ?</tbody>
?? ??? ?</table>
?? ??? ?? <!--分頁-->
?? ??? ? <div align="center">
?????? ??? ???????? <s:iterator begin="1" end="totalPages" var="p">
??????????????????? <a href="javascript:; pages(${p})"? target="right">${p}</a>
??????????????????? </s:iterator>
?? ??? ?</div>
?? ?</div>
?? ?</form>
?? ?
?? ?</body>
?? ?</html>
?
轉載于:https://www.cnblogs.com/huangt/p/3667178.html
總結
- 上一篇： HDU 4540
- 下一篇： Jquery Highcharts 参数