源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JSP分页显示的实例代码

  • 时间:2020-10-25 18:47 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JSP分页显示的实例代码
[b]1、mysql的limit关键字 (DAO)[/b] select * from tablename limit startPoint, numberPerPage; tablename 就是要分页显示的那张表的名称; startPoint 就是起始的位置 -1; numberPerPage 就是一页显示的条数。 例如: select * from comment limit 20,5; 则是从comment表中抽取21~25号评论: [img]http://files.jb51.net/file_images/article/201303/201332991025116.jpg[/img] [b]2、jQuery load函数 (页面JS)[/b] MySQL的limit关键字可以完成抽取一定范围(n,n+m]的记录,也就是说需要两个参数来决定某一页显示的内容,即“第x页”以及每页显示的个数。 每页显示的个数可以在程序中设定,也可以由用户设定。但,“第x页”这个参数一定是用户给出的。当用户点击页数、下一页/上一页按钮或跳转至某页时,需要将这个“第x页”参数传送给服务器,以便进行记录的抽取。
[url=checkComments.do?page=${page-1}]</c:when> <c:otherwise> <input type="button" disabled="true" name="lastPage" value="上一页" /><!-- 为了要那个灰掉的button --> </c:otherwise> </c:choose> <!-- 页数列表 --> <c:forEach items="${pageList}" var="item"> <c:choose> <c:when test="${item == page}"> <a href="checkComments.do?page=${item}" class="currentPage">${item}</a> </c:when> <c:otherwise> <a href="checkComments.do?page=${item}">${item}</a> </c:otherwise> </c:choose> </c:forEach> <!-- 下一页 按钮 --> <c:choose> <c:when test="${page != totalPages}"> <a href="checkComments.do?page=${page+1}"> <input type="button" name="nextPage" value="下一页" /> </a> </c:when> <c:otherwise> <input type="button" disabled=true name="nextPage" value="下一页" /><!-- 为了要那个灰掉的button --> </c:otherwise> </c:choose> <!-- 直接跳转 --> 共${totalPages}页 -向<input type="text" id="jumpTo" />页 <input type="button" value="跳转" onclick="jumpTo(${totalPages})" /> </div>
使用到的js函数 [b]6、CSS增强效果[/b] 为了凸显我们现在所在的页数,在上面的代码中我们特意做了判断:
[url=checkComments.do?page=${item}]</c:when>
这样,当前的页数就会被标记为currentPage类,如此一来,就可以在CSS文件中着重强调它了。比如:
或者再设置以下跳转页输入框的宽度
[u]复制代码[/u] 代码如下:
#jumpTo{ width:20px; }
这样,当前页的页面就会被标记为粗体、橘色: [img]http://files.jb51.net/file_images/article/201303/201332991513438.jpg[/img] [b]7、改进[/b] 用a标签的方法做链接虽然比较方便,不过会有下划线出现,感觉很不洋气。可以用css把它消除掉,或者hover时候加一些变化什么的。
[u]复制代码[/u] 代码如下:
#pageControl a {     text-decoration:none; }
[img]http://files.jb51.net/file_images/article/201303/201332991731685.jpg[/img]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部