jsp 이전 페이지 다음 페이지 넘 기기 기능 구현(예시 코드)

그동안 기말고사 와 실습 에 바 빠 블 로 그 를 쓰 지 못 한 지 오래 되 었 다.
그 동안 작은 프로젝트 를 만 들 었 는데 페이지 넘 기기 와 부 텍스트 편집기 Ueditor 의 두 가지 지식 을 담 았 습 니 다.Ueditor 는 아직 깊이 놀 지 못 했 습 니 다.깊이 놀 고 블 로 그 를 쓸 계획 입 니 다.
페이지 넘 기기 기능 을 실현 하려 면 하나의 pageIndex 만 설정 하면 됩 니 다.그리고 페이지 를 불 러 올 때마다 pageIndex 를 통 해 데 이 터 를 불 러 오 면 됩 니 다.
다음 페이지 에 pageIndex 를 전달 하기 위해 숨겨 진 input 상 자 를 설정 할 수 있 습 니 다.
이전 페이지 를 클릭 할 때 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;//      ,       
  int totalRecord=0;//      ,      
  int totalPage=1;//     ，      
  int pageIndex=1;//     ，        ，   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){//       
    //         
    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>

효과 도
페이지 뒤 집기:pageIndex=1

페이지 뒤 집기:pageIndex=2

이상 의 jsp 는 이전 페이지 의 다음 페이지 를 넘 기 는 기능(예시 코드)을 실현 하 는 것 이 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 에 게 참고 할 수 있 고 여러분 들 이 저 희 를 많이 지지 해 주시 기 바 랍 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

JSP| EL (Experession Language)

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

jsp 이전 페이지 다음 페이지 넘 기기 기능 구현(예시 코드)

좋은 웹페이지 즐겨찾기