快捷導(dǎo)航

jsp頁(yè)面數(shù)據(jù)分頁(yè)模仿百度分頁(yè)效果(實(shí)例講解)

更新時(shí)間：2017年07月14日 08:25:55 投稿：jingxian

下面小編就為大家?guī)?lái)一篇jsp頁(yè)面數(shù)據(jù)分頁(yè)模仿百度分頁(yè)效果(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

廢話不多說(shuō)，直接上代碼

請(qǐng)根據(jù)自己的項(xiàng)目、包名修改

<%@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>數(shù)據(jù)分頁(yè)</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>專業(yè)</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);   //記錄總數(shù)
  int pageSize = 10;          //每頁(yè)記錄數(shù)
  int start=1;            //顯示開始頁(yè)
  int end=10;              //顯示結(jié)束頁(yè)
  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\">首頁(yè)</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\">上一頁(yè)</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\">下一頁(yè)</a>",currPage+1));
         }
         
         out.print(String.format("<a class=\"prev\" href=\"?p=%d\">尾頁(yè)</a>",pageCount)); 
       %>
     </th>
   </tr>
</table>
</body>
</html>

以上這篇jsp頁(yè)面數(shù)據(jù)分頁(yè)模仿百度分頁(yè)效果(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: