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;//總的記錄條數,不包含查詢后的
  int totalRecord=0;//總的記錄條數,包含查詢后的
  int totalPage=1;//總的頁面數，包含查詢后的
  int pageIndex=1;//當前頁面號，用于控制頁面翻轉，默認為1
  ListRecord> records=null;
  DBBean db=new DBBean();
  allRecord=db.getRecordCount();
  totalRecord=db.getRecordCount();
  totalPage=(totalRecord-1)/10+1;
  if(request.getParameter("pageIndex")!=null){//不是第一次加載
    //要做下數據類型轉換
    pageIndex=Integer.valueOf(request.getParameter("pageIndex"));
    if(request.getParameter("keyword")!=null){
      String keyword=request.getParameter("keyword");
      records=db.getRecords(pageIndex,keyword);//獲取查詢內容一頁的事件記錄集,共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 狀態-->
    /div>!-- end: navigator 導航欄 -->
  /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%">標題/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;
            當前第%= 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 內容 -->
  /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>