简单实现JSP分页显示效果

本文实例为大家分享了JSP分页显示效果的具体代码,供大家参考,具体内容如下

1、mysql的limit关键字 (DAO)

select * from tablename limit startPoint, numberPerPage;

tablename 就是要分页显示的那张表的名称;

startPoint 就是起始的位置 -1;

numberPerPage 就是一页显示的条数。

例如: select * from comment limit 20,5;

则是从comment表中抽取21~25号评论:

2、jQuery load函数 (页面JS)

MySQL的limit关键字可以完成抽取一定范围(n,n+m]的记录,也就是说需要两个参数来决定某一页显示的内容,即“第x页”以及每页显示的个数。

每页显示的个数可以在程序中设定,也可以由用户设定。但,“第x页”这个参数一定是用户给出的。当用户点击页数、下一页/上一页按钮或跳转至某页时,需要将这个“第x页”参数传送给服务器,以便进行记录的抽取。

function goToPage(page){

  $('body').load("getComments.do?page=" + page);

}

或者,两个参数都由用户指定的话,函数可以写成:

function goToPage(page, numberPerPage){

  $('body').load("getComments.do?page=" + page + "&npp=" + numberPerPage);

}

3、servlet接收参数并组织内容 (servlet文件)

servlet通过接受jsp页面传来的request对象中的page和npp参数来获悉用户希望浏览第X页,以及一页显示多少条记录。

int page = Integer.parseInt(req.getParameter("page"));

4、servlet计算显示的页数列表

一般一次显示10页左右,也就是假如现在在第52页,那么可选的页数列表就是50、51、52。。。直到60.

计算的方法是,假设现在处于x页,那么起始值为x/10*10,前提是x>10。写成代码就是:

int start = 1;
if(page >= 10){
  start = page/10 * 10;
 }

有两个特殊情况:

① 总共的页数不足10个

② 页数不是10的整倍数

这样会出现页数列表小于10的情况,也很容易处理,加if条件判断一下就好了。大致的代码如下:

int total = sm.getCommentCount();
int totalPage = total/itemsPerPage;
if(total % itemsPerPage != 0){
  totalPage += 1;
}
Vector<Integer> pageArr = new Vector<Integer>();
int start = 1;
if(page >= 10){
   start = page/10 * 10;
 }
int num = start;
while(!(num > totalPage || num > start + 10)){
   pageArr.add(new Integer(num));
  ++num;
}

5、在jsp页面显示页数列表

通过4我们得到了一个计算后的页数列表pageArr,该列表说明针对当前页,我们应该展现哪些页数让用户可以直接点击。在servlet中将刚才的pageArr列表放入response对象中,同时放入page(当前页数)以及totalPage(最大页数)以帮助我们做一些判断。

<!-- 上一页 按钮 -->
<div id="pageControl">
<c:choose>
<c:when test="${page != 1}">
<a href="checkComments.do?page=${page-1}" rel="external nofollow" ><input type="button" name="lastPage" value="上一页" /></a>
</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}" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="currentPage">${item}</a>
</c:when>
<c:otherwise>
<a href="checkComments.do?page=${item}" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${item}</a>
</c:otherwise>
</c:choose>
</c:forEach>

<!-- 下一页 按钮 -->
<c:choose>
<c:when test="${page != totalPages}">
<a href="checkComments.do?page=${page+1}" rel="external nofollow" >
<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函数

function jumpTo(maxPage){
  var page = $("#jumpTo").val();
  if(page > maxPage || page < 1){
    alert("对不起,无法到达该页")
  }else{
    $('body').load('checkComments.do?page=' + page);
  }
}

6、CSS增强效果

为了凸显我们现在所在的页数,在上面的代码中我们特意做了判断:

<c:when test="${item == page}">
<a href="checkComments.do?page=${item}" class="currentPage">${item}</a>
</c:when>

这样,当前的页数就会被标记为currentPage类,如此一来,就可以在CSS文件中着重强调它了。比如:

.currentPage{
  font-weight:bold;
  color:#ff9a00;
}

或者再设置以下跳转页输入框的宽度

#jumpTo{
width:20px;
}

这样,当前页的页面就会被标记为粗体、橘色:

7、改进

用a标签的方法做链接虽然比较方便,不过会有下划线出现,感觉很不洋气。可以用css把它消除掉,或者hover时候加一些变化什么的。

#pageControl a {
  text-decoration:none;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JSP开发之Struts2实现下载功能的实例

    JSP开发之Struts2实现下载功能的实例 1.Action 类 package com.favccxx.strutsdemo; import java.io.File; import java.io.FileInputStream; import java.io.InputStream; import com.opensymphony.xwork2.ActionSupport; public class DownloadAction extends ActionSupport { priva

  • JSP 开发之THE SERVLET NAME ALREADY EXISTS.解决方法

    The servlet name already exists.解决方法 当我们建立过同名的servlet文件,然后又将其删掉后再用同类名字建一个servlet时就会报错. 解决办法:web.xml里面存有servlet的映射关系,需要自己手动删除web.xml里面的映射关系. 删除,保存刷新即可 如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • jsp 开发之struts2中s:select标签的使用

    jsp 开发之struts2中s:select标签的使用 1.第一个例子: <s:select list="{'aa','bb','cc'}" theme="simple" headerKey="00" headerValue="00"></s:select> 2.第二个例子: <s:select list="#{1:'aa',2:'bb',3:'cc'}" label=&qu

  • Jsp敏感词过滤的示例代码

    大部分论坛.网站等,为了方便管理,都进行了关于敏感词的设定. 在多数网站,敏感词一般是指带有敏感政治倾向(或反执政党倾向).暴力倾向.不健康色彩的词或不文明语,也有一些网站根据自身实际情况,设定一些只适用于本网站的特殊敏感词. 比如,当你发贴的时候带有某些事先设定的词时,这个贴是不能发出的.或者这个词被自动替换为星号(*)或叉号(X)等,或者说是被和谐掉了. 在我看来敏感词过滤最重要的是在写过滤词汇的算法,如何过滤出大批量的敏感词,我感觉DFA的思想不错 DFA简介 在实现文字过滤的算法中,DF

  • 详解JSP 中Spring工作原理及其作用

    详解JSP 中Spring工作原理及其作用 1.springmvc请所有的请求都提交给DispatcherServlet,它会委托应用系统的其他模块负责负责对请求进行真正的处理工作. 2.DispatcherServlet查询一个或多个HandlerMapping,找到处理请求的Controller. 3.DispatcherServlet请请求提交到目标Controller 4.Controller进行业务逻辑处理后,会返回一个ModelAndView 5.Dispathcher查询一个或多个

  • 详解Java读取本地文件并显示在JSP文件中

    详解Java读取本地文件并显示在JSP文件中 当我们初学IMG标签时,我们知道通过设置img标签的src属性,能够在页面中显示想要展示的图片.其中src的值,可以是磁盘目录上的绝对,也可以是项目下的相对路径,还可以是网络上的图片路径.在存取少量图片的情况下,采用相对路径存储图片的情况下最方便,也最实用.但是当图片数量过多时,这种方式就显的有些掣肘了. 当系统的图片数量过多时,如果仍把这些图片当做项目的一部分去发布,势必会大大延长项目的发布时间及更新时间.对于某些对于时限性要求特别高的系统来说,采

  • 浅谈jsp中的9个隐含对象

    在JSP中一共有9个隐含对象,这个9个对象我可以在JSP中直接使用. 因为在service方法已经对这个九个隐含对象进行声明及赋值,所以可以在JSP中直接使用. - pageContext 类型:PageContext 代表:当前页面的上下文 作用:可以获取到页面中的其他隐含对象,同时它还是一个域对象. - request 类型:HttpServletRequest 代表:请求 作用:可以获取用户发送的请求信息,它也是一个域对象. - session 类型:HttpSession 代表:当前会话

  • 简单实现JSP分页显示效果

    本文实例为大家分享了JSP分页显示效果的具体代码,供大家参考,具体内容如下 1.mysql的limit关键字 (DAO) select * from tablename limit startPoint, numberPerPage; tablename 就是要分页显示的那张表的名称: startPoint 就是起始的位置 -1: numberPerPage 就是一页显示的条数. 例如: select * from comment limit 20,5; 则是从comment表中抽取21~25号

  • 简单实现jsp分页

    数据分页,在开发中必不可少,由于数据量太大,不得不进行处理.但是对于分页,又有很多种方式,比如使用sql语句的limit,或者使用jquery的插件.但是底层的逻辑,都是需要的. 在这里贴出bean对象的代码,以及一个辅助类.我做的这个项目是一个个人博客,算是个人网站吧. (只贴部分底层逻辑代码) Page.java package cn.edu.ldu.util; public class Page { private int everyPage; //每页显示的数量 private int

  • JSP实现的简单分页显示效果代码

    本文实例讲述了JSP实现的简单分页显示效果代码.分享给大家供大家参考,具体如下: <%@ page contentType="text/html;charset=gb2312" %> <%@ page language="java" import="java.sql.*" %> <script language="javascript"> function newwin(url) { var

  • json实现jsp分页实例介绍(附效果图)

    json 在上篇文章已有详细介绍,json的既简单易懂,又传输迅速.并且能和javascript很好的融为一体. 在不需要添加jar的前提下,能够很好完成jsp分页问题. 下面具体介绍分页实例: 效果如图所示,采用jsp+servlet技术 首先:编写一个javaBean User.java 复制代码 代码如下: package bean; public class User { private int id; private String name; private String passwo

  • jsp分页显示完整实例

    本文实例讲述了jsp分页显示的实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %> <%@include file ="../inc/ChkPwd.jsp"%>

  • php简单实现数组分页的方法

    本文实例讲述了php简单实现数组分页的方法.分享给大家供大家参考,具体如下: 首先学东西  要多看手册 用php自带的函数  可以解决一些难解的问题 <?php /** * Created by JetBrains PhpStorm. * User: Administrator * Date: 13-6-11 * Time: 上午11:43 * To change this template use File | Settings | File Templates. */ header("

  • PHP简单实现数字分页功能示例

    本文实例讲述了PHP简单实现数字分页功能.分享给大家供大家参考,具体如下: <?php header ( 'Content-Type: text/html; charset=utf-8' ); //分页 $page=$_GET['page']; $allcount= 100; $page_size =10; $page_show =5; $page_count = ceil($allcount/$page_size); if($page <= 1 || $page == '') $page =

  • PHP实现简单实用的分页类代码

    本文实例讲述了PHP实现简单实用的分页类.分享给大家供大家参考,具体如下: <?php class Page { private $total; //总记录 private $pagesize; //每页显示多少条 private $limit; //limit private $page; //当前页码 private $pagenum; //总页码 private $url; //地址 private $bothnum; //两边保持数字分页的量 //构造方法初始化 public funct

  • PHP分页初探 一个最简单的PHP分页代码的简单实现

    PHP分页代码在各种程序开发中都是必须要用到的,在网站开发中更是必选的一项. 要想写出分页代码,首先你要理解SQL查询语句:select * from goods limit 2,7.PHP分页代码核心就是围绕这条语句展开的,SQL语句说明:查询goods数据表从第2条数据开始取出7条数据.在分页代码中,7表示每页显示多少条内容,2通过公式计算表示翻页数,通过传入不同参数替换"2"的值,即可筛选出不同的数据. index.php: include 'conn.php'; //引入数据库

  • Vue+Element-U实现分页显示效果

    本文实例为大家分享了Vue+Element-U实现分页显示效果的具体代码,供大家参考,具体内容如下 当我们从后端返回的数据量很大,并且根据需求我们需要将返回的数据全部都显示在页面中,默认情况下会把所有的数据全部显示在一个页面,这样非常影响视觉和页面的使用,所以需要使用分页 我这次使用的是Vue4.0 +  Element-UI组件,Element-UI库非常的丰富,它提供了一个分页组件 Pagination 展示效果:这个是获取两个时间段的上机记录 HTML部分: <el-card> <

随机推荐