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

清疚 2021-11-23 10:28 237阅读 0赞

废话不多说，直接上代码  
请根据自己的项目、包名修改

<%@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页面数据分页模仿百度分页效果(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

![在这里插入图片描述][aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzZmZThkNGE3YzMwMjBjMGFjYmU2ZTQxNDI3NWE4MTYyNDEwLmpwZw]

[aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzZmZThkNGE3YzMwMjBjMGFjYmU2ZTQxNDI3NWE4MTYyNDEwLmpwZw]: /images/20211122/48436e4e9992444881f0135a40f8873a.png