您的位置：首页 > Web前端 > BootStrap

Bootstrap分页在项目中的应用

2018-01-23 18:32 176 查看
//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"
onclick="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"
onclick="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Bootstrap 分页
相关文章推荐
新的分享
章节导航