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

%@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;//總的頁(yè)面數(shù)，包含查詢后的
  int pageIndex=1;//當(dāng)前頁(yè)面號(hào)，用于控制頁(yè)面翻轉(zhuǎn)，默認(rèn)為1
  ListRecord> 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)容一頁(yè)的事件記錄集,共10條
      totalRecord=db.getRecordCount(keyword);
      totalPage=(totalRecord-1)/10+1;
    }else{
      records=db.getRecords(pageIndex);//獲取一頁(yè)的事件記錄集,共10條
    }
  }else{//第一次加載
    records=db.getRecords(pageIndex);//獲取一頁(yè)的事件記錄集,共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" >首頁(yè)/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="請(qǐng)輸入要查詢的記錄">
          img src="img/search.jpg" onclick="searchKeyword();" class="button">
        /div>
      /form>
        table>
        tr>
          th width="10%">序號(hào)/th>
          th width="60%">標(biāo)題/th>
          th width="30%">時(shí)間/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 %>頁(yè)nbsp;nbsp;nbsp;
            每頁(yè)10條nbsp;nbsp;nbsp;
            當(dāng)前第%= pageIndex %>頁(yè)nbsp;nbsp;nbsp;
            a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" class="turnPage" onclick="turnTopPage()">上一頁(yè)/a>nbsp;nbsp;nbsp;
            a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" class="turnPage" onclick="turnBottomPage()">下一頁(yè)/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);
  //上一頁(yè)
  function turnTopPage(){
    if(pageIndex==1){
      return;
    }else{
      document.getElementById("pageIndex").value=pageIndex-1;
      document.getElementById("searchForm").submit();
    }
  }
  //下一頁(yè)
  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>