jsp實(shí)現(xiàn)上一頁下一頁翻頁功能(示例代碼)

更新時間：2017年07月14日 07:49:57 投稿：jingxian

下面小編就為大家?guī)硪黄猨sp實(shí)現(xiàn)上一頁下一頁翻頁功能(示例代碼)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前段時間一直忙于期末考試和找實(shí)習(xí)，好久沒寫博客了。

這段時間做了個小項(xiàng)目，包含了翻頁和富文本編輯器Ueditor的兩個知識點(diǎn),Ueditor玩的還不是很深，打算玩深后再寫篇博客。

要實(shí)現(xiàn)翻頁功能，只需要設(shè)置一個pageIndex即可，然后每次加載頁面時通過pageIndex去加載數(shù)據(jù)就行。

那么我們可以設(shè)置一個隱藏的input框，用于傳遞pageIndex給下個頁面。

當(dāng)我們點(diǎn)擊上一頁的時候，通過js方法改變pageIndex的值，再提交表單即可

二話不多說，看代碼，代碼里面寫的還算比較清楚。

這個是index.jsp的代碼。

index.jsp

<%@page import="Bean.DBBean"%>
<%@page import="Entity.Record"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>NoteBook of Eric Wu</title>
  <link rel="stylesheet" href="css/basic.css" rel="external nofollow" >
  <link rel="stylesheet" href="css/index.css" rel="external nofollow" >
</head>
<body>
<%
  int allRecord=0;//總的記錄條數(shù),不包含查詢后的
  int totalRecord=0;//總的記錄條數(shù),包含查詢后的
  int totalPage=1;//總的頁面數(shù)，包含查詢后的
  int pageIndex=1;//當(dāng)前頁面號，用于控制頁面翻轉(zhuǎn)，默認(rèn)為1
  List<Record> records=null;
  DBBean db=new DBBean();
  allRecord=db.getRecordCount();
  totalRecord=db.getRecordCount();
  totalPage=(totalRecord-1)/10+1;
  if(request.getParameter("pageIndex")!=null){//不是第一次加載
    //要做下數(shù)據(jù)類型轉(zhuǎn)換
    pageIndex=Integer.valueOf(request.getParameter("pageIndex"));
    if(request.getParameter("keyword")!=null){
      String keyword=request.getParameter("keyword");
      records=db.getRecords(pageIndex,keyword);//獲取查詢內(nèi)容一頁的事件記錄集,共10條
      totalRecord=db.getRecordCount(keyword);
      totalPage=(totalRecord-1)/10+1;
    }else{
      records=db.getRecords(pageIndex);//獲取一頁的事件記錄集,共10條
    }
  }else{//第一次加載
    records=db.getRecords(pageIndex);//獲取一頁的事件記錄集,共10條
  }
  session.setAttribute("records", records);//便于后面使用
%>
  <div id="home">
  <div id="header">
    <div id="WebTitle">
      <div class="maintitle"><a href="index.jsp" rel="external nofollow" rel="external nofollow" target="_blank">NoteBook of Eric Wu</a></div>
      <div class="subtitle">The palest ink is better than the best memory !</div>
    </div>

    <div id="navigator">
      <ul id="navList">
        <li><a href="index.jsp" rel="external nofollow" rel="external nofollow" >首頁</a></li>
        <li><a href="add.jsp" rel="external nofollow" >新增</a></li>
        <li><a href="change.jsp" rel="external nofollow" >修改</a></li>
          <li><a href="delete.jsp" rel="external nofollow" >刪除</a></li>
      </ul>
      <div id="Stats">
        記錄-<%=allRecord %>
      </div><!--end: Stats 狀態(tài)-->
    </div><!-- end: navigator 導(dǎo)航欄 -->
  </div><!-- end: header 頭部 -->
  
  <div id="main">
      <div id="content">
        <form id="searchForm" name="searchForm" action="index.jsp" method="get">
          <input type="hidden" name="pageIndex" id="pageIndex" value="1">
        <div id="search">
          <div class="center"></div>
          <input type="text" class="search" id="keyword" name="keyword" placeholder="請輸入要查詢的記錄">
          <img src="img/search.jpg" onclick="searchKeyword();" class="button">
        </div>
      </form>
        <table>
        <tr>
          <th width="10%">序號</th>
          <th width="60%">標(biāo)題</th>
          <th width="30%">時間</th>
        </tr>
        <%
          int count=0;
          if(records!=null){
            for(Record r: records){
              count++;
        %>
        <tr>
          <td class="center"><%= count %></td>
          <td><a href="content.jsp?recordId=<%= r.getId() %>" rel="external nofollow"  target="_blank"><%= r.getTitle() %></a></td>
          <td class="center"><%= r.getTime() %></td>
        </tr>
        <%  
            }
          }
        %>
         <tr class="alt" >
          <td class="center" colspan="3">
            共<%= totalRecord %>條記錄&nbsp;&nbsp;&nbsp;
            共<%= totalPage %>頁&nbsp;&nbsp;&nbsp;
            每頁10條&nbsp;&nbsp;&nbsp;
            當(dāng)前第<%= pageIndex %>頁&nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" class="turnPage" onclick="turnTopPage()">上一頁</a>&nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" class="turnPage" onclick="turnBottomPage()">下一頁</a>&nbsp;&nbsp;&nbsp;
          </td>
        </tr>
        </table>
    </div><!-- end: content 內(nèi)容 -->
  </div><!-- end: main 主要部分 -->

  <div id="footer">   
    Copyright &copy;2017 汕大-吳廣林
  </div><!-- end: footer底部-->
  </div><!-- end: home 自定義的最大容器 -->
</body>

<script type="text/javascript">
  var pageIndex=<%=pageIndex %>;
  var totalPage=<%=totalPage %>;
  console.log(pageIndex);
  //上一頁
  function turnTopPage(){
    if(pageIndex==1){
      return;
    }else{
      document.getElementById("pageIndex").value=pageIndex-1;
      document.getElementById("searchForm").submit();
    }
  }
  //下一頁
  function turnBottomPage(){
    if(pageIndex>=totalPage){  
      return;
      }else{
      document.getElementById("pageIndex").value=pageIndex+1;
      document.getElementById("searchForm").submit();
      }
  }
  function searchKeyword(){
    document.getElementById("pageIndex").value=1;
    document.getElementById("searchForm").submit();
  }
</script>
</html>

效果圖

翻頁后：pageIndex=1