JSP 페이지 데이터 페이징은 Baidu 페이징 효과를 모방합니다(예제 설명)-JS 튜토리얼-php.cn

JSP 페이지 데이터 페이징은 Baidu 페이징 효과를 모방합니다(예제 설명)

韦小宝

풀어 주다： 2018-01-18 09:51:59

원래의

1885명이 탐색했습니다.

아래 편집기는 Baidu 페이징 효과를 모방하기 위한 jsp 페이지 데이터 페이징에 대한 기사를 가져올 것입니다(예제를 통한 설명). 편집자분께서 꽤 괜찮다고 생각하셔서 지금부터 JSP 소스코드를 공유해서 참고용으로 올려드리겠습니다. 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 페이지 데이터 페이징은 바이두를 모방합니다. 페이징 효과(예시 포함 설명)는 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다! !