Bootstrap分页在项目中的应用

//scheduleemplShow.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<jsp:include page="../head.jsp"></jsp:include>

<!-- 分页 -->
<link rel="stylesheet"
	href="<%=path%>/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">

	<!-- Content Wrapper. Contains page content -->
	<div class="content-wrapper">

		<!-- Main content -->
		<section class="content">
			<div class="row">
				<div class="col-xs-12">
					<div class="box">
						<div class="box-header">
							<h3 class="box-title">我的日程</h3>
						</div>

						<!-- /.box-header -->
						<div class="box-body">
							<table id="page" class="table table-bordered table-striped"
								cellpadding="0" cellspacing="0" border="1px">
								<!-- 遍历循环传递数据 -->
								<!-- ============表头============= -->
								<thead>
									<tr>
										<th>日程编号</th>
										<th>日程内容</th>
										<th>开始时间</th>
										<th>结束时间</th>
										<th>创建时间</th>
										<th>状态</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<%
										int s = 1;
									%>
									<c:set var="nowDate" value="<%=System.currentTimeMillis()%>"></c:set>
									<c:forEach var="scheduleempl" items="${slist}" step="1">
										<tr>
											<td><%=s++%></td>
											<!-- 给后台获取的数据添加序号 -->
											<td>${scheduleempl.scheduleContent}</td>
											<td><fmt:formatDate
													value="${scheduleempl.scheduleStartTime}"
													pattern="yyyy年MM月dd日 - HH:mm:ss" /></td>
											<td><fmt:formatDate
													value="${scheduleempl.scheduleEndTime}"
													pattern="yyyy年MM月dd日 - HH:mm:ss" /></td>
											<td><fmt:formatDate
													value="${scheduleempl.scheduleCreateTime}"
													pattern="yyyy年MM月dd日 - HH:mm:ss" /></td>
											<td><c:choose>
													<c:when
														test="${nowDate - scheduleempl.scheduleEndTime.time > 0}">
														<font color="#FF0000">已过期</font>
													</c:when>
													<c:otherwise>
														未完成
													</c:otherwise>
												</c:choose></td>
											<td><c:choose>
													<c:when
														test="${nowDate - scheduleempl.scheduleEndTime.time > 0}">
														<a class="btn btn-primary btn-xs" data-toggle="modal"
															disabled>修改</a> 
													</c:when>
													<c:otherwise>
														<a class="btn btn-primary btn-xs" data-toggle="modal"
															href="editScheduleempl/${scheduleempl.s_id}" class="more"
															οnclick="if(confirm('确定修改?')==false)return false;">修改</a> 
													</c:otherwise>
												</c:choose> 
												<a class="btn btn-primary btn-xs" data-toggle="modal"
												href="delScheduleempl/${scheduleempl.s_id}" class="more"
												οnclick="if(confirm('确定删除?')==false)return false;">删除</a></td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
						<!-- /.box -->
					</div>
					<!-- /.col -->
				</div>
				<!-- /.row -->
		</section>
		<!-- /.content -->
	</div>

	<div class="control-sidebar-bg"></div>

	<jsp:include page="../foot.jsp"></jsp:include>
	<!-- 分页 -->
	<script
		src="<%=path%>/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
	<script
		src="<%=path%>/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

	<script>
		$(function() {
			$('#page').DataTable({
				"pagingType" : "simple_numbers",//设置分页控件的模式  
				searching : true,//屏蔽datatales的查询框  
				aLengthMenu : [ 5, 10, 15 ],//设置一页展示10条记录  
				"oLanguage" : { //对表格国际化  
					"sLengthMenu" : "每页显示 _MENU_条",
					"sZeroRecords" : "没有找到符合条件的数据",
					//"sProcessing": "<img src=’./loading.gif’ />",    
					"sInfo" : "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条",
					"sInfoEmpty" : "木有记录",
					"sInfoFiltered" : "(从 _MAX_ 条记录中过滤)",
					"sSearch" : "搜索:",
					"oPaginate" : {
						"sFirst" : "首页",
						"sPrevious" : "前一页",
						"sNext" : "后一页",
						"sLast" : "尾页"
					}
				},
			})
		})
	</script>

</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值