1.分页概述
1.1 数据方面问题
浏览器《-----（数据）----网络《-----（数据）---服务器
假设服务器中有上百万条数据，如果不使用分页功能，将这些数据查询出来，是一个耗时的操作，并会占用大量的网络资源。
1.2 增强用户使用体验需要
方便查询和展示所需要的数据
1.3 常见分页方式
**传统的分页方式---带有分页工具栏
**下拉式分页--时尚绚丽（例如QQ空间加载）
【比较】
采用传统的分页方式，可以明确的获取数据信息，如有多少条数据，分多少页显示等等
采用下拉式的分页方式，一般无法获取明确的数据数量相关的信息，但是在分页操作以后，仍然可以看到之前查询的数据。
2.常见的分页实现方式
2.1 使用List接口中subList(int startIndex,int endIndex)方法实现分页
前台购物车分页实现 cart.jsp页面
//subList(int startIndex,int endIndex):返回列表中指定的startIndex(包括)和endIndex(不包括)之间的部分视图
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
//全选
function myAll() {
//获取状态
var allCheckBox = $("allCheckBox");
//获取所有的子复选框
var cartCheckBox = document.getElementsByName("cartCheckBox");
//遍历
for(var i = 0;i < cartCheckBox.length; i++){
cartCheckBox[i].checked = allCheckBox.checked;
}
}
//控制单个选中
function selectSingle() {
//获取状态
var allCheckBox = $("allCheckBox");
//获取所有的子复选框
var cartCheckBox = document.getElementsByName("cartCheckBox");
//假设选中
var flag = true;
for(var i = 0;i < cartCheckBox.length;i++){
if(cartCheckBox[i].checked==false){
flag = false;
break;
}
}
allCheckBox.checked = flag;
}
//批量删除
function deleteSelectRow() {
var cartCheckBox = document.getElementsByName("cart");
}
</script>
</head>
<body>
<%-- <c:if test="${empty listCarts }">
<jsp:forward page="doIndex.jsp"></jsp:forward>
</c:if> --%>
<div class="shoppingBar">
<h1 style="text-align: center">我的购物车</h1>
<hr />
<table id="oTabCart" align="center" style="text-align: center;"
width="100%">
<tr>
<td style="font-weight: bolder;">全选 <input id="allCheckBox" type="checkbox" onclick="myAll()" /></td>
<th>商品名称</th>
<th>商品类型</th>
<th>商品图片</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品总价</th>
<th>商品操作</th>
</tr>
<!-- 获取购物车 -->
<c:if test="${empty listCarts }">
<jsp:forward page="doCart.jsp"></jsp:forward>
</c:if>
<c:if test="${empty pageIndex }">
<jsp:forward page="doCart.jsp"></jsp:forward>
</c:if>
<c:if test="${empty pageSize }">
<jsp:forward page="doCart.jsp"></jsp:forward>
</c:if>
<c:if test="${empty pageMax }">
<jsp:forward page="doCart.jsp"></jsp:forward>
</c:if>
<c:forEach items="${listCarts }" var="list">
<tr id="${list.goods.gid }">
<td><input name="cartCheckBox" type="checkbox"
onclick="selectSingle()" /></td>
<td>${list.goods.gname }</td>
<td>${list.goods.gtype }</td>
<td><img width="80" height="50" src="${list.goods.gimage }"></td>
<td>${list.goods.gprice }</td>
<td>
<button onclick="setCount('minus',${list.goods.gid})">-</button> <input
style="text-align: center; width: 50px;" type="text"
value="${list.ccount }">
<button onclick="setCount('add',${list.goods.gid})">+</button>
</td>
<td>${list.ctotal }</td>
<td>
<button
onclick="window.location.href = 'doDel.jsp?gid=${list.goods.gid}'">删除</button>
<button
onclick="window.location.href = 'javascript:editGoods(${list.goods.gid})'">修改</button>
</td>
</tr>
</c:forEach>
</table>
<div style="text-align: center">
当前页数:[${pageIndex }/${pageMax }]
<button onclick="window.location.href = 'doCart.jsp?pageIndex=1'">首页</button>
<button
onclick="window.location.href = 'doCart.jsp?pageIndex=${ pageIndex-1<=1?1:pageIndex-1}'"><</button>
<button
onclick="window.location.href = 'doCart.jsp?pageIndex=${ pageIndex+1>pageMax?pageMax:pageIndex+1}'">></button>
<button
onclick="window.location.href = 'doCart.jsp?pageIndex=${ pageMax }'">末页</button>
</div>
<div class="shoppingBar-footer">
<div class="manage">
<span class="delAll">删除所选商品</span> <span onclick="window.location.href = 'index.jsp'" class="return">继续购物</span>
</div>
<button id="go" type="button">去结算</button>
</div>
</div>
<script type="text/javascript">
//控制数量的递增和递减
function setCount(type, gid) {
//根据gid获取对应的tr
var tr = document.getElementById(gid);
//根据tr获取指定的单元格
var count = tr.cells[5].children[1].value;
if(type == 'minus'){
//数量--
if(count <= 1){
alert("商品数量不能少于一件");
}else{
count--;
}
}else if(type == 'add'){
//数量++
count++;
}
tr.cells[5].children[1].value = count;
goodsCalc();
}
//自动计算商品的总价格
function goodsCalc() {
var oTabCart = document.getElementById("oTabCart");
//获取表格中的所有行
var trs = oTabCart.rows;
//遍历
for(var i = 1;i < trs.length;i++){
//拿到单价
var gprice = trs[i].cells[4].innerHTML;
//拿到数量
var ccount = trs[i].cells[5].children[1].value;
//计算总价
var ctotal = parseFloat(gprice) * parseFloat(ccount);
//将总价格赋值单元格中
trs[i].cells[6].innerHTML = ctotal;
}
}
function editGoods(gid) {
//数量
var ccount = document.getElementById(gid).cells[5].children[1].value;
location.href = "doEdit.jsp?gid="+gid+"&ccount="+ccount+"";
}
</script>
</body>通过EL表达式以及JSTL使其java代码分离至do处理页面
doCart.jsp
//定义默认页码
int pageIndex = 1;
int pageSize = 3;
String pIndex = request.getParameter("pageIndex");
if (null != pIndex) {
pageIndex = Integer.parseInt(pIndex);
}
/* System.out.println(pIndex); */
List<Cart> listCarts = (List<Cart>) session.getAttribute("listCarts");
int pageCount = listCarts.size();
/* System.out.println(pageCount); */
int start = (pageIndex - 1) * pageSize;
int end = pageIndex * pageSize > pageCount ? pageCount : pageIndex * pageSize;
/* System.out.println(start); */
/* System.out.println(end); */
listCarts = listCarts.subList(start, end);
int pageMax = pageCount / pageSize;
if (pageCount % pageSize != 0) {
pageMax++;
}
/* System.out.println(pageMax); */
request.setAttribute("listCarts", listCarts);
request.setAttribute("pageIndex", pageIndex);
request.setAttribute("pageSize", pageSize);
request.setAttribute("pageMax", pageMax);
//请求转发
request.getRequestDispatcher("cart.jsp").forward(request, response);2.2 直接使用数据库SQL实现分页.
-从学生表中查询出前10条数据
mysql: select * from student limit 0,10
oracle: select * from (select e.*,rownum rn from (select * from student)s where rownum <=10)where rn >=1
789
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
