jsp réalise la fonction de tourner la page précédente vers la page suivante (exemple de code)-js tutoriel-php.cn

jsp réalise la fonction de tourner la page précédente vers la page suivante (exemple de code)

韦小宝

Libérer： 2018-01-18 09:52:35

original

11062 Les gens l'ont consulté

L'éditeur suivant vous apportera un jsp pour implémenter la fonction de passage de la page précédente à la page suivante (exemple de code). L'éditeur pense que c'est plutôt bien, je vais donc partager le code source JSP avec vous maintenant et vous donner également une référence. Si vous êtes intéressé par JSP, suivez l'éditeur pour y jeter un œil

J'ai été occupé avec les examens finaux et la recherche de stages il y a quelque temps, et je n'ai pas blogué depuis longtemps.

J'ai travaillé sur un petit projet pendant cette période, y compris le tournage de pages et le texte enrichiÉditeurDeux points de connaissance d'Ueditor Je n'ai pas encore joué très profondément à Ueditor. plus profondément. Écrivez un blog.

Pour implémenter la fonction de tournage de page, il vous suffit de définir un pageIndex, puis de charger les données via pageIndex à chaque fois que la page est chargée.

Ensuite, nous pouvons configurer une zone de saisie cachée pour transmettre le pageIndex à la page suivante.

Lorsque l'on clique sur la page précédente, changez la valeur de pageIndex via la méthode js, puis soumettez le formulaire

Sans plus tarder, regardez le code, le code est relativement clair. .

Voici le code de 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);//便于后面使用
%>
  <p id="home">
  <p id="header">
    <p id="WebTitle">
      <p class="maintitle"><a href="index.jsp" rel="external nofollow" rel="external nofollow" target="_blank">NoteBook of Eric Wu</a></p>
      <p class="subtitle">The palest ink is better than the best memory !</p>
    </p>

    <p 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>
      <p id="Stats">
        记录-<%=allRecord %>
      </p><!--end: Stats 状态-->
    </p><!-- end: navigator 导航栏 -->
  </p><!-- end: header 头部 -->
  
  <p id="main">
      <p id="content">
        <form id="searchForm" name="searchForm" action="index.jsp" method="get">
          <input type="hidden" name="pageIndex" id="pageIndex" value="1">
        <p id="search">
          <p class="center"></p>
          <input type="text" class="search" id="keyword" name="keyword" placeholder="请输入要查询的记录">
          <img src="img/search.jpg" onclick="searchKeyword();" class="button">
        </p>
      </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 %>条记录   
            共<%= totalPage %>页   
            每页10条   
            当前第<%= pageIndex %>页   
            <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" class="turnPage" onclick="turnTopPage()">上一页</a>   
            <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" class="turnPage" onclick="turnBottomPage()">下一页</a>   
          </td>
        </tr>
        </table>
    </p><!-- end: content 内容 -->
  </p><!-- end: main 主要部分 -->

  <p id="footer">   
    Copyright ©2017 汕大-吴广林
  </p><!-- end: footer底部-->
  </p><!-- 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>

Copier après la connexion

Rendu

Après tourner la page : pageIndex=1

Après avoir tourné la page : pageIndex=2

L'implémentation jsp ci-dessus La fonction de rotation de page en page (exemple de code) est tout le contenu que l'éditeur a partagé avec vous. J'espère qu'il pourra vous donner une référence ! !

Recommandations associées :

Avantages, inconvénients et opérations de base de JSP

Explication du problème de chemin après le passage du servlet à la page JSP

Que dois-je faire s'il y a un problème de chemin lorsque le servlet transmet vers la page JSP ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!