JSP分页显示的实例代码

yizhihongxing

JSP分页是指将大量数据分为多页进行展示,提高用户体验并减少服务器压力。下面将详细讲解如何实现JSP分页显示,以及两个示例说明。

一、分页的基本思路

  1. 在JSP页面中,使用SQL语句查询出所有数据数量;
  2. 计算总页数,每页显示数据数量,以及当前页码;
  3. 使用SQL语句查询出当前页码的数据;
  4. 在JSP页面中循环显示当前页码的数据,并在页面上添加分页控件。

二、实现步骤

1. 数据库准备

假设我们需要对一张名为user的表进行分页显示。表中包含idname两个字段。

2. 在JSP页面中进行查询

在JSP页面中编写SQL查询语句,查询出数据库中数据的总数量,并将其存储到totalCount变量中。

<%
    Connection conn = null;
    PreparedStatement ps = null;
    ResultSet rs = null;

    String sql = "SELECT COUNT(*) FROM user";

    try {
        Class.forName("com.mysql.jdbc.Driver");
        conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "password");
        ps = conn.prepareStatement(sql);
        rs = ps.executeQuery();
        if (rs.next()) {
            int totalCount = rs.getInt(1);
        }
    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        // 关闭数据库连接
    }
%>

3. 分页计算

计算总页数,每页显示数据数量以及当前页码,并将其存储到相应的变量中。这里我们设定每页显示5条数据。

<%
    int pageSize = 5;
    int currentPage = 1;
    int totalCount = 0;
    int totalPage = 0;

    // 上面查询数据库的代码

    if (request.getParameter("currentPage") != null) {
        currentPage = Integer.parseInt(request.getParameter("currentPage"));
    }

    totalPage = (totalCount + pageSize - 1) / pageSize;
%>

4. 查询当前页码数据

根据当前页码和每页显示数据数量,在SQL语句中加上LIMIT限制条件,从数据库中查询出当前页码的数据。

<%
    String sql = "SELECT * FROM user LIMIT ?, ?";
    int start = (currentPage - 1) * pageSize;
    ps = conn.prepareStatement(sql);
    ps.setInt(1, start);
    ps.setInt(2, pageSize);
    rs = ps.executeQuery();

    while (rs.next()) {
        int id = rs.getInt("id");
        String name = rs.getString("name");
        // 将数据展示到页面上
    }
%>

5. 分页控件的实现

在页面上以列表的形式展示数据,并在底部添加分页的控件。通常的分页控件有“上一页”、“下一页”、“首页”、“尾页”和页码数字等。这里以Bootstrap为例实现一个简单的分页控件。

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li <% if (currentPage == 1) { %>class="disabled"<% } %>>
      <a href="/index.jsp?currentPage=<%= currentPage - 1 %>" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <% for (int i = 1; i <= totalPage; i++) { %>
    <li <% if (i == currentPage) { %>class="active"<% } %>>
      <a href="/index.jsp?currentPage=<%= i %>"><%= i %></a>
    </li>
    <% } %>
    <li <% if (currentPage == totalPage) { %>class="disabled"<% } %>>
      <a href="/index.jsp?currentPage=<%= currentPage + 1 %>" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

三、示例说明

示例1:分页查询学生信息

我们需要将一张名为student的表进行分页展示,其中包含字段idnameagescore。并按照分数从高到低进行排序。

具体实现过程如下:

  1. 在JSP页面中,使用SQL语句查询出所有学生数据数量;
  2. 计算总页数,每页显示10条数据,以及当前页码;
  3. 使用SQL语句查询出当前页码的学生数据,并按照分数从高到低排序;
  4. 在JSP页面中循环显示当前页码的学生数据,并在页面上添加分页控件。

示例代码如下:

<%
    Connection conn = null;
    PreparedStatement ps = null;
    ResultSet rs = null;

    String sql = "SELECT COUNT(*) FROM student";

    try {
        Class.forName("com.mysql.jdbc.Driver");
        conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "password");
        ps = conn.prepareStatement(sql);
        rs = ps.executeQuery();
        if (rs.next()) {
            int totalCount = rs.getInt(1);
        }
    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        // 关闭数据库连接
    }

    int pageSize = 10;
    int currentPage = 1;
    int totalPage = 0;

    if (request.getParameter("currentPage") != null) {
        currentPage = Integer.parseInt(request.getParameter("currentPage"));
    }

    totalPage = (totalCount + pageSize - 1) / pageSize;

    sql = "SELECT * FROM student ORDER BY score DESC LIMIT ?, ?";
    int start = (currentPage - 1) * pageSize;
    ps = conn.prepareStatement(sql);
    ps.setInt(1, start);
    ps.setInt(2, pageSize);
    rs = ps.executeQuery();

    while (rs.next()) {
        int id = rs.getInt("id");
        String name = rs.getString("name");
        int age = rs.getInt("age");
        float score = rs.getFloat("score");
        // 将数据展示到页面上
    }
%>

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li <% if (currentPage == 1) { %>class="disabled"<% } %>>
      <a href="/student.jsp?currentPage=<%= currentPage - 1 %>" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <% for (int i = 1; i <= totalPage; i++) { %>
    <li <% if (i == currentPage) { %>class="active"<% } %>>
      <a href="/student.jsp?currentPage=<%= i %>"><%= i %></a>
    </li>
    <% } %>
    <li <% if (currentPage == totalPage) { %>class="disabled"<% } %>>
      <a href="/student.jsp?currentPage=<%= currentPage + 1 %>" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

示例2:分页查询商品信息

我们需要将一张名为goods的表进行分页展示,其中包含字段idnamepriceimage。并按照价格从低到高进行排序。

具体实现过程如下:

  1. 在JSP页面中,使用SQL语句查询出所有商品数据数量;
  2. 计算总页数,每页显示20条数据,以及当前页码;
  3. 使用SQL语句查询出当前页码的商品数据,并按照价格从低到高排序;
  4. 在JSP页面中循环显示当前页码的商品数据,并在页面上添加分页控件。

示例代码如下:

<%
    Connection conn = null;
    PreparedStatement ps = null;
    ResultSet rs = null;

    String sql = "SELECT COUNT(*) FROM goods";

    try {
        Class.forName("com.mysql.jdbc.Driver");
        conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "password");
        ps = conn.prepareStatement(sql);
        rs = ps.executeQuery();
        if (rs.next()) {
            int totalCount = rs.getInt(1);
        }
    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        // 关闭数据库连接
    }

    int pageSize = 20;
    int currentPage = 1;
    int totalPage = 0;

    if (request.getParameter("currentPage") != null) {
        currentPage = Integer.parseInt(request.getParameter("currentPage"));
    }

    totalPage = (totalCount + pageSize - 1) / pageSize;

    sql = "SELECT * FROM goods ORDER BY price ASC LIMIT ?, ?";
    int start = (currentPage - 1) * pageSize;
    ps = conn.prepareStatement(sql);
    ps.setInt(1, start);
    ps.setInt(2, pageSize);
    rs = ps.executeQuery();

    while (rs.next()) {
        int id = rs.getInt("id");
        String name = rs.getString("name");
        float price = rs.getFloat("price");
        String image = rs.getString("image");
        // 将数据展示到页面上
    }
%>

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li <% if (currentPage == 1) { %>class="disabled"<% } %>>
      <a href="/goods.jsp?currentPage=<%= currentPage - 1 %>" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <% for (int i = 1; i <= totalPage; i++) { %>
    <li <% if (i == currentPage) { %>class="active"<% } %>>
      <a href="/goods.jsp?currentPage=<%= i %>"><%= i %></a>
    </li>
    <% } %>
    <li <% if (currentPage == totalPage) { %>class="disabled"<% } %>>
      <a href="/goods.jsp?currentPage=<%= currentPage + 1 %>" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JSP分页显示的实例代码 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • padding盒子内部文字跟盒子之间的距离

    首先,padding 是盒子和其边框之间的空间,而不是盒子内部的空间。因此,padding 会对盒子的大小产生影响,并且也会影响盒子内部内容的位置。 在 CSS 中,我们可以使用 padding 属性来定义盒子的内边距。这个属性可以取一个数值,表示上下左右四个方向的内边距大小(单位可以是 px、em 等),也可以取两个值,表示上下和左右两个方向的内边距大小。…

    css 2023年6月9日
    00
  • Webpack如何引入bootstrap的方法

    下面是Webpack如何引入bootstrap的方法的完整攻略。 步骤一:安装Bootstrap 在引入Bootstrap前,我们首先需要将它安装到我们的开发环境中。可以使用npm进行安装,在项目根目录下执行以下命令: npm install bootstrap –save-dev 这条命令会将Bootstrap安装到我们的项目根目录下的node_modu…

    css 2023年6月10日
    00
  • CSS中的position:relative;的作用示例介绍

    下面是关于CSS中position:relative;的作用示例介绍的详细攻略。 1. 什么是position:relative;? 在CSS中,使用position属性可以指定一个元素在文档中的定位方式,一共有四种值可选:static、relative、absolute、fixed。其中,position:relative;表示相对定位,它的特点是相对于元…

    css 2023年6月9日
    00
  • CSS中的选择器种类总结及效率比较

    接下来我将详细讲解“CSS中的选择器种类总结及效率比较”的完整攻略。 CSS中的选择器种类总结及效率比较 CSS选择器是用于定位HTML文档中的元素并应用样式的工具。根据选择器的种类及其使用情况,CSS选择器可以分为多种类型。以下是CSS中选择器类型的总结及效率比较。 基本选择器 基本选择器是选择HTML标签、ID、class的选择器。这种选择器是最常用的选…

    css 2023年6月10日
    00
  • dreamweaver教程:怎么解决8.0中CSS应用无效

    Dreamweaver教程:怎么解决8.0中CSS应用无效 Dreamweaver是一款非常流行的网页设计工具,但在使用过程中,有时会遇到CSS应用无效的问题。本攻略将详细讲解Dreamweaver教程:怎么解决8.0中CSS应用无效的方法,包括基本原理、解决方法和示例说明。 1. 基本原理 在Dreamweaver 8.0中,CSS应用无效的原因可能有很多…

    css 2023年5月18日
    00
  • electron打包中的巨坑解决记录

    下面我将详细讲解“electron打包中的巨坑解决记录”的完整攻略。 1. 问题描述 在使用Electron进行应用程序打包时,常常会遇到一些问题,如打包后程序无法运行、依赖包加载失败等。其中,最常见的问题是因为应用程序中包含了一些原生模块或第三方依赖包,导致打包后程序无法正常执行。 2. 解决方案 为了解决这些问题,我们需要使用Electron打包工具提供…

    css 2023年6月10日
    00
  • css子元素相对父元素进行定位的实现

    当我们需要将一个子元素相对于其父元素进行定位时,我们可以使用CSS的定位属性。在CSS中,有以下属性可以用来实现子元素相对父元素进行定位: position: relative; – 用于将子元素相对于父元素进行定位。该属性可以将元素定位到其正常位置之上,同时其他元素仍然占据其正常位置。 top, bottom, left, right – 用于控制相应的方…

    css 2023年6月9日
    00
  • Vue2.0 给Tab标签页和页面切换过渡添加样式的方法

    当使用 Vue2.0 开发应用时,我们可能需要 Tab 标签页或页面切换时添加过渡动画效果。以下是添加过渡动画效果的方法: 使用 Vue 的过渡类名 Vue 为过渡动画提供了内置的过渡类名。我们可以通过 CSS 来为这些类名添加样式。以下是在 Tab 标签页中使用过渡类名的示例: 首先,需要在 Vue 组件内部定义过渡的类名,比如在 style 标签中添加以…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部