jsp页面数据分页模仿百度分页效果(实例讲解)

废话不多说，直接上代码

请根据自己的项目、包名修改

<%@page import="web09.shop.DBUtil"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>数据分页</title>
  <style type="text/css">
    .page a{
      min-width: 34px;
      height: 34px;
      border: 1px solid #e1e2e3;
      cursor: pointer;
      display:block;
      float: left;
      text-decoration: none;
      text-align:center;
      line-height: 34px;
    }

    .page a:HOVER {
      background: #f2f8ff;
      border: 1px solid #38f ;
    }
    .page a.prev{
      width:50px;
    }
    .page span{
      width: 34px;
      height: 34px;
      border: 1px solid transparent;
      cursor: pointer;
      display:block;
      float: left;
      text-decoration: none;
      text-align:center;
      line-height: 34px;
      cursor: default;
    }
  </style>
</head>

<body>
<table class="tt" border="1" align="center" width="80%" cellpadding="10">
  <tr>
    <th>ID</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>专业</th>
  </tr>
  <%
  DBUtil dbutil=new DBUtil();
  Connection conn=dbutil.getCon();
  //Connection conn = new DBUtil().getCon();
  PreparedStatement pstmt1 = conn.prepareStatement("select count(*) from student");
  ResultSet rs1 = pstmt1.executeQuery();
  rs1.next();
  int recordCount = rs1.getInt(1);   //记录总数
  int pageSize = 10;          //每页记录数
  int start=1;            //显示开始页
  int end=10;              //显示结束页
  int pageCount = recordCount%pageSize==0 ? recordCount/pageSize : recordCount/pageSize+1;
  int currPage = request.getParameter("p")==null ? 1 : Integer.parseInt(request.getParameter("p"));

  currPage = currPage<1 ? 1 : currPage;
  currPage = currPage>pageCount ? pageCount : currPage;

  PreparedStatement pst = conn.prepareStatement("select * from student limit ?,?");
  pst.setInt(1,currPage*pageSize-pageSize);
  pst.setInt(2,pageSize);
  ResultSet rs = pst.executeQuery();

  while(rs.next()){
  %>
  <tr align="center">
  <td><%=rs.getInt(1) %></td>
  <td><%=rs.getString(2) %></td>
  <td><%=rs.getInt("age") %></td>
  <td><%=rs.getString(4) %></td>
  </tr>
  <%
  }
  %>
  <tr>
     <th colspan="4" class="page">
       <%
         out.print(String.format("<a class=\"prev\" href=\"?p=%d\">首页</a>",1));
         if(currPage>=7){
           start=currPage-5;
           end=currPage+4;
         }
         if(start>(pageCount-10)){
           start=pageCount-9;
         }
         if(currPage>1){
           out.print(String.format("<a class=\"prev\" href=\"?p=%d\">上一页</a>",currPage-1));
         }

         for(int i=start;i<=end;i++){
           if(i>pageCount) break;
           String pageinfo=String.format("<a href=\"?p=%d\">%d</a>",i,i);
           if(i==currPage){
             pageinfo=String.format("<span>%d</span>",i);
           }
           out.print(pageinfo);
         }

         if(currPage<=pageCount){
           out.print(String.format("<a class=\"prev\" href=\"?p=%d\">下一页</a>",currPage+1));
         }

         out.print(String.format("<a class=\"prev\" href=\"?p=%d\">尾页</a>",pageCount));
       %>
     </th>
   </tr>
</table>
</body>
</html>

以上这篇jsp页面数据分页模仿百度分页效果(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 运用JSP+ajax实现分类查询功能的实例代码

    运用JSP+ajax实现分类查询功能的实例代码

    本文主要是介绍了运用JSP+ajax实现分类查询功能的实例代码,分享给大家供大家参考,具体如下: 这次是对小学期关于大学毕业生信息管理系统课程设计中遇到的一些问题和解决方法进行记录和分享. 题目要求:提供企业招聘信息(本年度或历年)查询功能: 首先建立一个jsp文件用来显示数据库信息,并在上面加输入条件的文本框和查询按钮,在这个jsp文件中需要完成一个js函数在用于完成查询功能. <%@ page language="java" pageEncoding="UTF-8&

  • jsp实现上一页下一页翻页功能(示例代码)

    jsp实现上一页下一页翻页功能(示例代码)

    前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需要设置一个pageIndex即可,然后每次加载页面时通过pageIndex去加载数据就行. 那么我们可以设置一个隐藏的input框,用于传递pageIndex给下个页面. 当我们点击上一页的时候,通过js方法改变pageIndex的值,再提交表单即可 二话不多说,看代码,代码里面写的还算比较清楚.

  • springMVC如何将controller中Model数据传递到jsp页面

    在action中存放数据,代码如下: @Controller // 加入到IOC容器 //@RequestMapping(value="/topic") public class TopicAction { @Resource(name = "topicServiceImpl") private TopicService topicService; /** * 首页显示 */ @RequestMapping(value="/index") pub

  • JSP Spring防止用户重复登录的实现方法

    JSP Spring防止用户重复登录的实现方法 Spring security防用户重复登录 使用spring security如何防止用户的重复登录呢?如果用户账号已登录,这时再进行第二次或多次登录,需要阻止这样的多次登录. 一.在web.xml中配置listener <listener> <listener-class>org.springframework.security.web.session.HttpSessionEventPublisher</listener-

  • JSP Spring配置文件中传值的实例详解

    JSP Spring配置文件中传值的实例详解 通过spring提供方法,在配置文件中取传值 调用get方法  targetObject :指定调用的对象       propertyPath:指定调用那个getter方法 例1: public class Test1 { private String name = "nihao"; public String getName() { return name; } } Xml代码 <bean id="t1" cl

  • ResourceBundle类在jsp中的国际化实现方法

    ResourceBundle类在jsp中的国际化实现方法

    今天第一次听说页面国际化这个词,所以查资料,顺便做了一个小页面,做做记录. 首先是两个资源文件,分别为msg_en_US.properties和msg_zh_CN.properties 显然中文字符是需要转换过来的. 这是jsp页面的代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page i

  • 详解SpringBoot集成jsp（附源码）+遇到的坑

    详解SpringBoot集成jsp（附源码）+遇到的坑

    本文介绍了SpringBoot集成jsp(附源码)+遇到的坑 ,分享给大家 1.大体步骤 (1)创建Maven web project: (2)在pom.xml文件添加依赖: (3)配置application.properties支持jsp (4)编写测试Controller (5)编写JSP页面 (6)编写启动类App.java 2.新建SpringInitialzr 3.pom文件 <dependencies> <dependency> <groupId>org.s

  • JSP开发之Spring方法注入之替换方法实现

    JSP开发之Spring方法注入之替换方法实现 Spring提供了一种替换方法实现的机制,可以让我们改变某个bean某方法的实现.打个比方我们有一个bean,其中拥有一个add()方法可以用来计算两个整数的和,但这个时候我们想把它的实现逻辑改为如果两个整数的值相同则把它们相乘,否则还是把它们相加,在不改变或者是不能改变源码的情况下我们就可以通过Spring提供的替换方法实现机制来实现这一要求. 替换方法实现机制的核心是MethodReplacer接口,其中定义了一个reimplement ()方

  • jsp页面数据分页模仿百度分页效果(实例讲解)

    废话不多说,直接上代码 请根据自己的项目.包名修改 <%@page import="web09.shop.DBUtil"%> <%@page import="java.sql.ResultSet"%> <%@page import="java.sql.PreparedStatement"%> <%@page import="java.sql.Connection"%> <%

  • vue前端页面数据加载添加loading效果的实现

    vue前端页面数据加载添加loading效果的实现

    目录 前端页面数据加载添加loading效果 具体实现 全局loading配置 1 再src/componennts/Spinner下面建立一个index.vue 2 再utils下面tools.js 3 再utils下面建议一个request.js 封装的axios请求 4 修改app.vue 前端页面数据加载添加loading效果 在前端上传文件或者加载数据的时候会有一段等待时间,如果加上一个loading效果会减轻用户等待的枯燥,这里就来记录学习一下如何实现loading效果. 效果大致如

  • 使用html+js+css 实现页面轮播图效果(实例讲解)

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=

  • ASP.NET实现级联下拉框效果实例讲解

    ASP.NET实现级联下拉框效果实例讲解

    用ASP.NET控件实现部门和员工的联动,参考过程如下 效果图: Default.aspx代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/199

  • jQuery实现选中行变色效果(实例讲解)

    //点击复选框添加样式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <

  • Python数据可视化:饼状图的实例讲解

    使用python实现论文里面的饼状图: 原图: python代码实现: # # 饼状图 # plot.figure(figsize=(8,8)) labels = [u'Canteen', u'Supermarket', u'Dorm', u'Others'] sizes = [73, 21, 4, 2] colors = ['red', 'yellow', 'blue', 'green'] explode = (0.05, 0, 0, 0) patches, l_text, p_text =

  • 利用模糊实现视觉3D效果实例讲解

    利用模糊实现视觉3D效果实例讲解

    目录 实现一个文字的 3D 变换 实现文字的模糊 使用模糊构建落叶效果 本文较短,将介绍巧用模糊实现视觉 3D 效果的技巧. 我们都知道,在正常的视觉效果中,离我们越近的通常我们会看的越清晰,而离我们较远则相对没那么清晰~ 我们可以利用清晰与模糊两种状态来构建视差效果.像是这样: 而在 CSS 中,我们可以利用模糊滤镜 filter: blur() 与 transform-style: preserve-3d 来实现它们. 实现一个文字的 3D 变换 首先,我们需要实现一个文字的 3D 变换,这

  • AngularJS与BootStrap模仿百度分页的示例代码

    AngularJS与BootStrap模仿百度分页的示例代码

    模仿百度的每页显示10条数据, 实现了当前页居中的算法. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BootStrap+AngularJS分页显示 </title> <script type="text/javascript" src="../js/jquery.js"></scr

  • 在JSP页面中动态生成图片验证码的方法实例

    在JSP页面中动态生成图片验证码 <%@ page language="java" pageEncoding="UTF-8"%> <%@ page import="java.awt.*,java.awt.image.*,com.sun.image.codec.jpeg.*,java.util.*" %> <%@ taglib http://struts.apache.org/tags-bean">ht

  • JS实现模仿微博发布效果实例代码

    JS实现模仿微博发布效果实例代码

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        *        {            margin: 0;

随机推荐