一个页面中有多个列表，加载数据

最新推荐文章于 2024-04-30 17:02:58 发布

Marttin2

最新推荐文章于 2024-04-30 17:02:58 发布

阅读量673

点赞数

分类专栏： java js

本文链接：https://blog.csdn.net/qq_39822451/article/details/85068601

版权

java 同时被 2 个专栏收录

253 篇文章 1 订阅

订阅专栏

202 篇文章 1 订阅

订阅专栏

<div class="ibox-content">
	<div class="table-responsive">
		<table class="table table-bordered table-hover">
			<thead>
				<tr>
					<th class="col-sm-2">No.</th>
					<th class="col-sm-2">xx</th>
					<th class="col-sm-2">xxx</th>
					<th class="col-sm-2">xxx</th>
					<th class="col-sm-2">xxx</th>
					<th class="col-sm-2">xxx</th>
				</tr>
			</thead>
			<tbody id="myData">
				<c:forEach items="${xxxBean.listBean}" varStatus="i" var="item">
					<tr>
						<td>${i.index+1}</td>
						<td>${item.now_price}</td>
						<td>${item.now_time}</td>
						<td>${item.now_end_time}</td>
						<td>${item.time}</td>
						<td>${item.more}</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
		<div class="dataTables_paginate paging_simple_numbers"></div>
	</div>
</div>

<script type="text/javascript">
	$().ready(function () {
		 $('div.dataTables_paginate').pageList({
			 prevText: '前一页', 
			 nextText: '下一页', 
			 recordText: '{0}页，{1}条记录',
			 totalCount: '${xxxBean.allRowNum}',
			 goInputType: 'text',
			 showGoLink: false,
			 showPageRange: 5,
			 pageSize:10,
			 currentPage:'${xxxBean.currentPage}',
			 renderPerCall: true,
			 clickCallback: function (currentPage) {
				 $.ajax({
					 type : 'post',
					 url : '<%=nextAction%>',
					 cache: false,
					 data: {currentPage:currentPage},
					 success : function(data) {
						 $("#myData tr").remove();
						 $(data).each(function(i){
							 $("#myData").append(
								"<tr>"
								+"<td>"+(i + 1 + (currentPage - 1) * 10)+"</td>"
								+"<td>"+ this.now_price +"</td>"
								+"<td>"+ this.now_time +"</td>"
								+"<td>"+ this.now_end_time +"</td>"
								+"<td>"+ this.time +"</td>"
								+"<td>"+ this.more +"</td>
								+"</tr>"
									 );
						});
					 },
					 error: function(e) {
					 }
				 });
			 }
		 });
	});
</script>